4 ms·
Great article and great collection of links! I have taken up coding simple SVG icons by hand, and it's easier than it looks. Also, a great feature of SVG is th
by bambax 4y ago
Great article and great collection of links!
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">
<defs>
<polygon points="30,0 10,60 60,22 0,22 50,60" id="star"/>
</defs>
<linearGradient id="gradid">
<stop offset="40%" stop-color="red"/>
<stop stop-color="grey"/>
</linearGradient>
<use href="#star" fill="url('#gradid')"/>
</svg>
In order to change the fill one just needs to manipulate the offset attribute of the first stop.
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.
- nverno 4y agoDo you use a tool for that? Or just the browser?
- bambax 4y agoI just code in a text editor or in jsfiddle.net. Changing gradients values or attaching a different gradient can only be done in JS (not CSS, AFAIK).
- iostream24 4y agoYou can use a subset of css on svg too… and either css or js animation
- FractalHQ 4y agoYou can also use the <animate /> SVG element to animate any SVG property with complex easing and timing curves.
- mgdlbp 4y agoI've been using vscode with an SVG live preview extension.
- sbarre 4y agoCan you share which extension you use? There seem to be a few of them out there.
- mgdlbp 4y agohttps://marketplace.visualstudio.com/items?itemName=jock.svg https://marketplace.visualstudio.com/items?itemName=jock.svg 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.[1] Perhaps because of the brokenness in the other extension (noted on its marketplace page). [1] https://marketplace.visualstudio.com/items?itemName=1000ch.svgo https://marketplace.visualstudio.com/items?itemName=1000ch.s...
- jwilk 4y agoIt should be "viewBox" (with uppercase "B"): https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/v...
- bambax 4y agoIndeed, you're right. Can't edit the comment anymore though, sorry about that.
- remram 4y agoI've been using defs to replace the font-awesome fonts and saving megabytes (to show the same icons).
- rambambram 4y agoSounds interesting. Can you tell some more about it? Do I understand correctly that you are replacing icons with SVG's? Or even the font of regular text?
- remram 4y agoInstead of including FA's stylesheets and fonts, you just have an SVG with some defs. 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.
- iostream24 4y agoNot the OP, but you can save the paths as objects in your preferred programming language and then inject them into svg tags inline.
- jancsika 4y agoOne nitpick-- for inline SVGs your ids and refs will be in the global namespace. So this won't work well if you want to have multiple inline SVGs, as multiply-defined ids aren't allowed in the DOM. 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
- bambax 4y agoIt's true that ids are in the global namespace; but as long as each id is unique you can have as many inline SVGs as you want. In fact, that's one benefit of this approach: define shapes once, name them, and then reference them. If you do it like this it's much easier to avoid id conflicts.
- deleted 4y ago[deleted]