[HN Gopher] Magical SVG Techniques
___________________________________________________________________
Magical SVG Techniques
Author : marban
Score : 301 points
Date : 2022-05-25 09:20 UTC (2 days ago)
(HTM) web link (www.smashingmagazine.com)
(TXT) w3m dump (www.smashingmagazine.com)
| jancsika wrote:
| I started skimming for the term "animation" and my first deep
| dive ended with a Greensock wrapper:
|
| > 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[1] 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)?
|
| 1: https://caniuse.com/svg-smil
| efortis wrote:
| Some SVG animation examples for learning:
|
| https://ericfortis.github.io/web-animations/
| marcusbrown wrote:
| Awesome inspiration material and great article! I would add also
| the following links maybe
|
| https://css-tricks.com/guide-svg-animations-smil/
|
| https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animati...
|
| At Flovatar [1] 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 [2] with it :)
|
| [1] https://flovatar.com
|
| [2] https://twitter.com/flovatar/status/1520509399466483716
| troymc wrote:
| My experience with SVG is that it renders great in all modern
| browsers, but Illustrator, Inkscape and other vector graphics
| editors don't support the latest SVG features.
|
| I suspect that's why Shutterstock asks contributors to upload an
| EPS file, not SVG.
| chrismorgan wrote:
| I can point to SVG functionality (2 or even earlier in some
| cases) missing from both browsers and Inkscape, but my feeling
| is that there's more missing, and more _important_ stuff
| missing, in browsers than in Inkscape. Where browsers are
| generally ahead is CSS in SVG.
| richard_todd wrote:
| It's actually not been that hard to hand-write an SVG that
| looks good in the major browsers, but then Inkscape renders
| it into a mess. The areas I tend to run into it are when
| fine-tuning text, and when using complicated clip-paths.
| Maybe I only have this impression because I hand-write svg
| watching my progress in a browser, and only check in inkscape
| after the fact. Perhaps if I started with inkscape I'd be
| noticing all the ways the browser fails on inkscape svg
| instead. Either way it's not an ideal situation.
| mkl wrote:
| EPS files _definitely_ don 't support the latest SVG features.
| They don't even support partial transparency (alpha)!
| techdragon wrote:
| These are some very very awesome SVG works. A++ work by the
| original authors here and the dive into how they are done is very
| nice too.
| almostdigital wrote:
| These are great! I found out recently that GitHub supports SVGs
| in your profile README so couldn't resist setting up a huge
| animation on mine[1], you can't run JavaScript in SVGs unless
| they are inlined with the HTML but maybe it would be possible to
| setup a GitHub action to automatically generate it periodically.
|
| https://github.com/jnordberg
| BonoboIO wrote:
| Nice.
|
| 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.
| gfodor wrote:
| Kind of reminds me of... log4j.
| arraypad wrote:
| I likewise couldn't resist doing something silly with an SVG
| animation on my profile [1], and I also have a micro startup
| [2] generating such SVGs periodically to serve as dashboards
| you can embed in your README.md. I'm interested in more of your
| predictions!
|
| [1] https://github.com/arraypad/
|
| [2] https://repography.com/
| BonoboIO wrote:
| [1] at first I was like ... okay Head is going to the middle
| and ,,explode" to spider view of commits and then I was like
| oh god yes he did it. The dvd thing.
|
| Hahaha. Great work.
| chrisweekly wrote:
| Sarah Drasner's epic preso blew my mind 5 years ago, still
| relevant and eye-opening today:
|
| https://slides.com/sdrasner/svg-can-do-that
| jamal-kumar wrote:
| Yo same here she's a genius. Opened me up to developing skills
| on the front end as being something that could actually be
| pretty fun.
|
| 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 :)
| WallyFunk wrote:
| > Let's look at some magical SVG techniques that you can use
| right away
|
| 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.
| asdfkjjha wrote:
| no. you don't need to support older browsers. supporting older
| browsers only encourages people to not update their browsers.
| if they can't update their browser because some IT dept. said
| they can't then maybe if the whole internet is broken for them,
| the IT dept will finally let them update.
| easrng wrote:
| SVGs work on IE9 and higher plus every single version of Chrome
| and Firefox and Edge and Opera and Safari and Opera Mini. What
| more could you want? https://caniuse.com/svg
| perardi wrote:
| And at 99.81% full support on mobile browsers.
|
| 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.
| rhdunn wrote:
| I also find the SVG Primer
| (https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html) a
| useful reference with clear examples.
| uptime wrote:
| https://observablehq.com is a great place to create and play with
| SVG. Created by Mike Bostock who brought us d3 in js. It is a
| notebook environment and there are some promise-based
| conveniences among cells to be aware of. I find it fun to use and
| learn a lot from the community.
| wonderbore wrote:
| There is really not much about SVG here. These are drawing
| techniques and little is specific to SVG. I was expecting
| something along the lines of using `stroke-dashoffset` to create
| loading bars. Almost everything here is just "think of something
| and paint it onto a canvas," where the canvas' technology is SVG.
| bambax wrote:
| 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.
| remram wrote:
| I've been using defs to replace the font-awesome fonts and
| saving megabytes (to show the same icons).
| rambambram wrote:
| Sounds 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?
| iostream24 wrote:
| Not the OP, but you can save the paths as objects in your
| preferred programming language and then inject them into
| svg tags inline.
| jwilk wrote:
| It should be "viewBox" (with uppercase "B"):
|
| https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/v...
| bambax wrote:
| Indeed, you're right. Can't edit the comment anymore though,
| sorry about that.
| jancsika wrote:
| One 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 wrote:
| It'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.
| nverno wrote:
| Do you use a tool for that? Or just the browser?
| bambax wrote:
| I 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 wrote:
| You can use a subset of css on svg too... and either css or
| js animation
| mgdlbp wrote:
| I've been using vscode with an SVG live preview extension.
| sbarre wrote:
| Can you share which extension you use? There seem to be a
| few of them out there.
| mgdlbp wrote:
| 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=1
| 000ch.s...
___________________________________________________________________
(page generated 2022-05-27 23:00 UTC)