Tip: how to create SVGs and changing the fill color dynamically

[lrose]

I think that you may be running in to this:

Embedding plain SVG results in incorrect rendering

The short version: The SVG spec is immense. Really, truly, ridiculously immense. We employ some extremely limited parsing when you drop an SVG in and choose to embed it. If there’s anything in the SVG we don’t recognize, we don’t reject it - we just don’t assign it any meaning in the output. For some things, that might be plausible to change on our side. For more exotic SVG features, it’ll probably never happen when embedding in this way; instead, just leave your SVG intact and display it as …

Also, watch out for this:

Creating animation-ready valve/pump SVGs

Performance is the reason. Creating the nested components is expensive; for very large SVGs significantly so.

For simple things, I usually just draw them inside the designer, by embedding this blank SVG and adding the elements/paths that I need.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns="http://www.w3.org/2000/svg"
  width="50mm"
  height="50mm"
  viewBox="0 0 50 50"
  version="1.1">
</svg>

Those are the only tags outside of the actual elements that you need in an SVG.

For larger complicated SVG's I use Inkscape and save them as optimized. I stole the settings for that from @nminchin.

[BUG-11342] Perspective - Can't draw any shapes

Not sure if worth mentioning, that if you do use Inkscape, you should save your SVGs as an Optimised SVG and not as an Inkscape SVG. It pulls all the crap out of the file. I use these settings fwiw: Edit: uncheck the top option, don't remove unused ids [image] [image] [image] Edit: maybe should uncheck the convert css to XML option

Honestly though, complex SVG's should be linked, and you should use separate SVG's only for the things which you must animate or interact with.