Miscellaneous on SVG and similar

Miscellaneous on SVG and similar

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

#3# SVG Dividers

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


Create font from SVG files: The SVG Font Machine | Glyphter

Check this for IcoMoon: WP SVG Icons


SEO and SVG’s - recommended alt-text convention for SVG


date 18. May 2020 | modified 17. Jan 2023
filename: CSS » SVG Miscellaneous