I have taken up coding simple SVG icons by hand, and it's easier than it looks. Also, a great feature of SVG is the <defs> element, which lets one define shapes anywhere in an HTML page, and reuse them anywhere else (ie, not inside the same SVG).
So for example one can have an SVG element at the top of the page that lists a bunch of symbols in a global defs element, and reuse them at will some other places, without loading anything externally, or copy-pasting anything.
Used shapes can also be transformed: different colors for fill or stroke, scaled up or down, rotated, moved, etc.
> Good news, you can achieve fractional ratings with only CSS and inline SVG. Samuel Kraft explains how it works.
The technique presented in that other page is overly complex and convoluted.
Fractional stars can be done very simply in pure SVG with gradients. Here's an example of a grey star filled at 40% with red:
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 60 60">
<polygon points="30,0 10,60 60,22 0,22 50,60" id="star"/>
<stop offset="40%" stop-color="red"/>
<use href="#star" fill="url('#gradid')"/>
If there are many stars it can be tiresome to attach a different gradient to each star; what I do in that case is define 8 gradients from 10% to 90% fill, and reference them as needed for each object that needs to be filled to approx. that percentage.
It also does other IDE things like completions and MDN docs tooltips (quite handy for infrequent path authoring).
Don't remember why, but I also have a separate SVGO (sort of a formatter) extension. Perhaps because of the brokenness in the other extension (noted on its marketplace page).
Changing gradients values or attaching a different gradient can only be done in JS (not CSS, AFAIK).
Luckily XML has namespaces. Contact your local XML specialist for details on how to use them to solve this problem...
hides behind bush, snickers as confused XML specialist tells you that XML namespaces cannot solve this problem
Instead of having a <i class=...></i> to use an icon, which CSS turns into a specific character with a specific font name, which the font turns into a specific glyph from that font (usually SVG), you have a <svg><use ...></svg>
You can use the same icon because FA is already using SVG fonts, you can copy and paste the icons out.
It reminds me of flash from back in the day minus the horrible security holes and that's enough to put a smile on my face :)
SVG is so versatile, the „hidden“ features like embedded html, iFrames, always funny to play with them. Sometimes in productive ways, sometimes for fun or for fun and profit like bugbounty hunting.
The SVG posters are cool, if you're looking for some feedback try to find some way to reduce the lag on the site when previewing them. In Safari on a M1 the site slows to a crawl once the poster SVG is loaded, each click takes several seconds to register. Maybe you could do a low res server side rendered version? That could you let users preview their repos without them being able to just right-click the SVG as well
Hahaha. Great work.
> I use GreenSock for most of my animation because it makes sequencing animations a breeze and when working with SVG, I know I can rely on the transforms working consistently cross browser.
I mean, caniuse shows SMIL support across all modern browsers. So if an SVG guru is using a wrapper lib I'm guessing it's yet another case of the web having an API that is "off-by-one" in the usability dept.
So what transform dragons lurk in SMIL (or any dragons for that matter)?
I suspect that's why Shutterstock asks contributors to upload an EPS file, not SVG.
At Flovatar  we've been using SVG and SMIL animations as a way to achieve true composability and interactivity for our NFTs while also being able to store all the illustrations fully on-chain.
I just fell in love with SVG and highly encourage everyone to dig more into the potentials of it. You can even have fun and create epic pranks  with it :)
However after months of slowly building my JS/SVG skills, I found out that no SVG renderer renders the shapes with mathematical accuracy.
And that was the first time I hit the learning curve known as “floating point precision”. I’ve since run in to so many of the other programming learning curves (like timezones! And how did everyone agree to taint the integrity of the unix epoch?), but I digress.
While the field of programming can be frustrating in it’s imprecision it’s also 100% worth learning, and SVG+CSS+JS is a wildly powerful mix that flies under the radar far too often.
How can I set a CSS variable as the color of a path.
Is there a way to use SVGs as custom characters? Even better to allow copy-pasting them?
Yes, you can create a font out of svg files. For example, I've seen fonts with only the letters of the logo, so the logo can be written as text and displayed as designed.
BTW, I haven't done a font like that, but here are some instructions:
So we're assuming a company/vendor/brand/person/whatever wants their site only working in the latest modern browser here are we?
Because there's always the caveat of backward compatibility that you have to consider. There are people stuck on older browsers (for whatever reason). SVG should be used sparingly and strictly for decoration. Don't build all your site's graphics with it. Use plain images for communicating ideas instead of SVG.
I can’t think of a particularly plausible case where someone is using a browser so old it can’t support SVG—because if they are, they are on something like IE 8, and they are obviously going to be running into way, way bigger issues.
And yes, much of the modern internet is broken for them, but the basic and essential services are not, and that's what they can afford to use.
They'll get an updated device eventually, when they save enough cash and the annoyances justify the spend for a replacement (perhaps second-hand), or when a friend upgrades and gives away their old kit for free. Either way, the replacements are often years old when obtained, so the wheel turns again.
There are a lot of people running old devices. You can see this in the OS version web request stats looking at old OS versions people would not run if they had recent devices. More subtly you can see it in the screen resolution stats.