> In SVG handling of clip paths is quite cumbersome and not very intuitive.
Modern web browsers now support "clip-path" CSS property with inline/shorthand values which are much more convenient to use than <clipPath> element. There are some examples on MDN [1]. I haven't performed extensive tests yet but they seem to be working just fine with SVG objects.
If I were to build a web-based vector graphics editor from scratch today, I would make it work internally with a "sane" subset of SVG such as SVG Micro [1].
This way you get a fast and reliable rendering engine for free (including support for MathML and HTML objects), you can easily import third-party SVG assets with a normalizer such as SVGO and you don't need to bother with all the convoluted special cases.
From the table of contents this looks like a book sponsored by and written to promote GreenSock. Which would be fine if the title was not misleading. Apparently SMIL is mentioned only in one chapter as "not suggested" solution.
GreenSock works and it's fine but I'm always deeply suspicious of any product that tries that hard to promote itself. If the approach is so great, let it speak for itself
Inkscape is the only major vector graphics editor that relies on SVG as its native file format. Most other apps are merely allowing you to import/export SVG files which is often a lossy process (e.g. vector objects with filter effects might get rasterized).
SVGator is focused primarily on animation and it's rather pricey. Boxy SVG might be a better choice if you are looking for a web-based SVG editor (disclaimer: I'm the developer).
Entities seem to be resolved at parse time, so they are more like a preprocessor directives. <use> is much more powerful as all instances are "live" and updated dynamically when you change the original object.
If I recall correctly, the primary motivation behind <symbol> and <use> was interoperability with corresponding primitives in Adobe Illustrator.
For me the biggest missing block is the text search API. It's ridiculous that you can't add a basic search input to your Firebase-based website unless you use TypeSense, Algolia or some other additional database that you have to manage and keep in sync.
Despite all the recent enshitification, I can't think of any alternative solution that would come even close to what Firebase has to offer. Authentication API is especially hard to beat (cheap and very easy to integrate).
Boxy SVG editor comes with built-in support for creation and editing of SVG icon sprites.
You can play with a sample SVG sprite on https://boxy-svg.com/#demo-symbols. Individual icons are shown under "Defs Panel -> Symbols". To edit an icon just double-click its thumbnail. To make part of an icon recolorable, select that part and then click "Fill Panel -> Paint -> Type -> Inherit".
You could then create separate symbols which contain a recolored instance of the original symbol. The underlying markup will look something like this:
hmm, I didn't know you can use fragment identifiers in src attribute, that changes the game quite a bit. I remember looking for stuff like that, though. Not sure why I didn't anything, because it seems like it's been supported for quite a while. I only found the reuse inside svg in the same parent html document.
Fragment identifiers in "src" attribute seem to be supported by all modern browsers, but now I realized my example was wrong - you can reference <view> elements, but not <symbol> elements directly.
To make it work you would have to either replace <img src="sprite.svg#green"/> with <svg ...><use href="sprite.svg#green"></use></svg> or add views to the sprite file:
Boxy SVG: https://boxy-svg.com/#demo-elements
Repath Studio: https://repath.studio/
MacSVG: http://macsvg.org