by chrisweekly
1 subcomments
- Even tho it's 8y old, Sarah Drasner's famous "SVG Can Do That?" talk is still eye-opening for many. CSS has matured a ton since then (I'm less sure about SVG per se)... in any case it's HIGHLY recommended.
Slides: https://slides.com/sdrasner/svg-can-do-that
Video:
https://youtu.be/ADXX4fmWHbo?si=6YPZkopyEDc8PSte
by LegionMammal978
5 subcomments
- One fun thing that can be done with SVG files: you can use entities in an inline DTD to define constants to be shared across different places in the file. You can see some great examples of this in the SVGs in David Ellsworth's "Squares in Squares" page [0].
The major browsers have no issues with this, though note that some tools like Inkscape won't parse the DTD nor expand the entities.
[0] https://kingbird.myphotos.cc/packing/squares_in_squares.html
by joshuaturner
0 subcomment
- "A Deep Dive Into SVG Path Commands" by Nanda Syahrasyad [0] is really great for understanding how SVG paths are composed. It's from almost 2 years ago now and really opened my eyes to all that SVGs can do and exactly how they're doing it.
[0] https://www.nan.fyi/svg-paths
- I worked on a project that did something fun with SVGs like this. It was built with React, and we had a series of still illustrations with an animated element, with its colour controlled by a CMS.
The frontend would basically call an API that would return an SVG image with the right colour assigned and the animation done by hiding and showing svg elements.
You can see an example here: https://web.archive.org/web/20221020133516im_/https://uncrow...
- I really miss Macromedia Flash. There wasn't a single tech like Flash and SWF format which flourished with so many indie games and animated movies available without any extra downloads (other than Flash Player). Barier to entry was so low.
Now, take SVG, it has potential to do everything what SWF could. But there is no editor like Flash and scene/object based coding solution like ActionScript. And each browser has own quirks so only simple SVG is guaranteed to be displayed everywhere.
- Complex animated SVG is fun to roll until you get into the weeds of SMIL and Safari bricks your phone for missing a leading 0 on a float or some random nonsense.
- For anyone who is using creatively using JS to create SVG dynamically and looking for work, DM me!
by CliffStoll
2 subcomments
- Is there any SVG extension which allows density of line? I have a plotter which can lift/lower a pen; it's driven from SVG files. It'd be sweet to allow the pen to lower while the line is being drawn (as we often do with handwriting).
Oh - it's an Axidraw, from Evil Mad Scientist Labs - great device, wonderful people.
- I always thought transforms were an odd inclusion in SVG until I tried to make my own icons/logo with it. Those curves are challenging to get right. When I got done with the second logo I decided it looked flat and I needed to skew it 10°. The thought of rewriting all of those lines and curves suddenly made rotation seem like a much much better idea. Good thing too because it looked weird next to test and I changed the angle several more times to make the kerning look right.
by danielstocks
5 subcomments
- Made a small silly game recently just for fun, using mostly CSS animated SVG tiles for rendering: https://pipeline-panic.vercel.app/
- SVG feels like a very underexplored and underused territory. You can do so many things with it. It really depends on your imagination. But you’ll possibly need to “hardcore” a lot of stuff, so yeah, depends on the use case as well.
- SVG+CSS is super powerful, a simple feature that I love is making diagrams respect dark/light mode, without any javascript. Check the diagrams here for example: https://blog.davidv.dev/posts/ipvs-lb/
by Voultapher
3 subcomments
- > Unkey's landing page is a nice example.
That landing page is a nauseatingly laggy experience on a very powerful M1 Pro laptop. And slow to load, all for some fancy lines? I'd take a product that focuses on substance over style as dev. Don't get me wrong, style is important and I like pretty things, but here it seems the tradeoff is not well done.
by fitsumbelay
0 subcomment
- Awesome post, site design is dope as well
For as long as SVG's been around its potential feels untapped. I can't think of any other element that can encapsulate functional HTML, CSS and JS -- basically an entirely different HTML document -- as easily
- SVG feels much like HTML to me, especially when animations are involved: on the first sight it is quite nice and simple, does its job well, can be handled by fairly basic viewers (as well as converters, editors) and generated easily. Then there are even more features with CSS and JS, which also look neat, but then simplicity goes away, along with it goes the wide support of full functionality, and compatibility (due to partial support, unexpected behaviors in different contexts). It still looks like a fine option when animations are needed, but I would rather avoid those in SVG when they are not necessary.
- Couple of (nice?) things I've built with SVG:
Sun Clock: https://sunclock.net
Degrees What?: https://degreeswhat.com
- One nice thing about SVGs is that they can be connected to the dom, you can do css, and easier to debug than canvas. Performance is the only thing holding it back from making declarative code for plotting and mapping charts.
- Maybe I'm in the minority, but I wish there were an similarly popular vector drawing format that did much much less than SVG. Any time you want to support vector drawings in a project, the obvious approach is to support SVG...which basically means you have to bring in the equivalent of a browser. What is the minimal alternative?
by AndrewSwift
0 subcomment
- I love what you have done here — it's very graceful.
I was feeling great but now I think "I have a lot to learn — I'd better get going!"
If you are interested in SVG animation, I wrote a program to do it from within Adobe Illustrator — see examples and how it works at https://svija.com/en/animation
- Love this! I think SVG is super underrated, particularly in the age of diffusion based image generation. I’ve written briefly about it here: https://rorads.github.io/technical/quick-ai-reflection-on-sv...
- I wrote a game of Tetris in JavaScript with SVG many years ago. It had nice graphics and was smoothly animated. I hadn’t heard of anyone else using SVG like that at the time.
I also made a game called Pro Office Calculator (available on Steam), which includes a Doom-style 3D engine for which I used Inkscape as my map editor. Here’s an example of a map: https://github.com/robjinman/pro_office_calc/blob/develop/da...
by paulryanrogers
0 subcomment
- Fun to see how apparent boundaries can be pushed or broken with clever use of lesser known features.
That said, most of this is probably better done with CSS today.
My only professional exposure to SVG was when a pen tester found my predecessor's code had unintentionally allowed them, and that one can do injection attacks from the SVG itself. Of course this was around the time a client discovered SVG worked for them, so I had to make support official and defeat injection attacks. Good times.
- This taught me that SVGs can be animated with CSS. Cool!
I wonder if anybody has recreated vector graphics games like Asteroids using SVGs and animation. You'd have to use JS to change the shape and direction of the asteroids when they're shot, but that would just require a bit of JS.
by intrasight
0 subcomment
- Haven't done much recently, but I do really like SVG. I did a fun project for a grid scale battery company in 2017. I generated graphical reports of battery status and health. I used a .Net extension in Sql Server to generate the graphics from the database.
- A lot of ecosystem vibe seems to go to Lottie at the moment though.. does SVG cover a matching feature set? is there hope for a conversion tool?
- Great article! On mobile I can't find anywhere to demo/see the animated content in action, not sure if it's desktop only or what.
- i'll be a contrarian, that css and svg "hacks" like this are "impressive" are a symptom of a web-platform that is dogshit for multimedia. If a game did this nobody would even blink, the fact that it's another convoluted css hack makes it "notable".
- All I want is a browser that executes WASM and displays SVG... get out out of JS/HTML hell.
- Svg Tailwind combo makes hover animations easy and fun.
- svg based games, wen?
by slow_turtle3
0 subcomment
- oh wow!!
- [dead]
- >height="20"
What fresh hell is this?
by chentastic
6 subcomments
- Was always fascinated by SVG art. How good are LLMs in generating SVGs?
Hacker News
