Miscellaneous on SVG and such

Miscellaneous on SVG and such

Coloring a SVG

I’ve found that the only way to color SVG is by inline-ing it. I’ve tried everything else, but styling from external document, without inlining, simply doesn’t work. To conclude: If you keep your SVG image as a separate document, you can’t modify it from the HTML document that calls it.

Perfect resources:

Styling And Animating SVGs With CSS Cascading SVG Fill Color Multi-Colored SVG Symbol Icons with CSS Variables SVG fill with use tag

Failed experiments not using in-lining

I’ve tried using fill: currentColor inside SVG file, believing that currentColor will propagate from parent HTML document. But it won' - it didn’t work. Btw, that meant search-replacing in notepad++ with regex-es:

Search:
  <svg([^>]*)>

Replace:
  <svg\1><style>[fill="#6c63ff"]{fill:currentColor;}</style>

SVG Design Resources

SVG Shapes

SVG Dividers

Collection of unique shape dividers Design Set - Shape Dividers - OXYGEN4FUN

date 01. Jan 0001 | modified 28. May 2021
filename: CSS » SVG Miscellaneous