16 ms·

SVG can do that?

645 points by funspectre 9y ago

nimish 9y ago
I pray for screen readers.
- debaserab2 9y ago
  What image format do you recommend that would work better on a screen reader?
  - swiley 9y ago
    Maybe people are overusing images and part of the way they mentally justify it is vector graphics?
  - wscott 9y ago
    The article is proposing SVG for rendering responsive text for articles. So the screen reader comment is valid.
    - tedunangst 9y ago
      The text is all there, isn't? The first demo I liked at used svg to rearrange the page, but all the text would render like normal. Probably even works with a text only browser.
    - prezjordan 9y ago
      It is not, <text> is picked up by screen-readers without any issue.
      - dredmorbius 9y ago
        In what order? Have you ever looked at a text dump of a PDF? Assuming it's a text-PDF in the first place, there's no guarantee that it's in any sensible order. Of course, most Web writing is pastiche anyway.
- spdustin 9y ago
  SVGs are actually quite accessible to assistive technology. Here are some tips I used for a recent demonstration: https://www.sitepoint.com/tips-accessible-svg/ https://www.sitepoint.com/tips-accessible-svg/
khanhkid 9y ago
It's awesome. last time, I using SVG to import image to pdf files (using TCPDF). The quality is clearly & beautiful. Now, Thank you for your introduction about another things SVG can do on the website.
kevinb7 9y ago
While SVG can do a lot, there are certain things that it isn't optimized for. In particular animating lots of shapes simultaneously. The animation of the globe exploding into a bunch of triangles from the slides is a good (bad?) example of this. Also, there can also be inconsistencies is in the rendering of SVGs between browsers.
- abritinthebay 9y ago
  That’s not really SVG that’s being bad there - it’s that browsers haven’t optimized for it. They will if more people use it. SVG in Chrome can be particularly painful due to their mediocre support of some things (sometimes outright contradicting the spec). That’s a vendor issue tho, nothing intrinsic to the format.
  - ygra 9y ago
    Ironically we found that IE had the best SVG performance for quite a while (by now the others have mostly caught up). And then they broke a lot of things behaviour-wise in Edge again for quite some time. Performance was still great, but if your image doesn't look like it should it doesn't help.
    - abritinthebay 9y ago
      True, though I’ve often found you have to be doing some rather obscure or strange things to screw up basic display Or advanced CSS.
flamedoge 9y ago
Very cool. SVGs can be very sensible choice for certain applications that canvas doesn't cover well.
Jack000 9y ago
coming soon, full SVG websites featuring: - loading bar until website is fully loaded - animated buttons that bounce and flash - full screen 2 second transitions from page to page - all in one page, no urls! feels like 2010 again : ]
Brian_K_White 9y ago
Wow, svg sits there and does mostly nothing on my phone. Just like Flash! Can't pinch to zoom to read the text that was too small, just like Flash! Half the supposedly neat interactive gewgaws like "turn this gear" didn't react to any presses or gestures at all. Just like Flash!
- tedunangst 9y ago
  Are you clicking on the animated gif of the demo or did you follow the link to the demo?
- cstrat 9y ago
  In the OP's linked slideshow those are just videos playing and not interactive demos (except for the CodePen one)
- aidos 9y ago
  Events can be attached to SVG elements just like any other element in the dom. Pinch to zoom / pan etc can all be implemented fine. Your complaints might hold true with certain demos, but they're not limitations of SVG
noonespecial 9y ago
I use svg all the time to make tiny web interfaces for embedded systems. When the entire web app has to fit in 350k, you don't have space for gif's or jpg's.
- exikyut 9y ago
  That's very interesting. Would be cool to see a generalized example of the kinds of interfaces you're building.
  - noonespecial 9y ago
    The most impressive rabbit I've pulled out of the SVG hat in this regard is being given a 2.1MB logo and told that it had to appear full screen during the log in and be "crisp and not all jaggy". Did it in about 900 bytes.
    - jiggunjer 9y ago
      With inkscape?
      - noonespecial 9y ago
        You got it. Imported the jpg and traced it with Inkscape. Hand optimized the SVG and inlined it right into the html of the login page.
        Veratyr 9y ago
        Logos are typically shipped in SVG or Adobe Illustrator format aren't they? Even the old style ones had technical specifications. Seems odd you'd have to hand trace a JPEG.
        noonespecial 9y ago
        Ha! Yeah. I think maybe you and I might travel in slightly different circles.
jordache 9y ago
SVG has the opposite performance profile of Canvas. SVG hits a performance ceiling as number of elements increases. Canvas, since it's rasterized image can handle a rasterized representation of millions of SVG elements. However as Canvas dimension increase, it will hit a performance ceiling.
- TazeTSchnitzel 9y ago
  In my experience, canvas 2D also has a number-of-elements performance ceiling if you're drawing things rather than using images, which feels like it defeats the purpose. For example, try drawing hundreds of coloured rectangles per frame. Easy, right? If you're using WebGL, or any sensible graphics API, yes. If you're using canvas, the web-browser will parse and re-parse your colour expression CSS n times per frame. Enjoy your 100% CPU usage.
  - jordache 9y ago
    > has a number-of-elements performance ceiling if you're drawing things rather than using images, which feels like it defeats the purpose. Well you can generate your imagery programmatically and then render it to canvas as a raster image. Canvas is not purely for implementing a web based drawing app.
    - icebraining 9y ago
      But you can also embed a raster image in SVG.
      - jordache 9y ago
        The context of the discussion is to leverage SVG's DOM based approach to render on screen elements
    - TazeTSchnitzel 9y ago
      Software rasterisation is slow and power-inefficient, and does not scale particularly well with screen size.
mamcx 9y ago
So, how crazy to use SVG for a cross-platform UI?
- jancsika 9y ago
  I did that. It works ok. Some gotchas: 1. SVG has all these seemingly useful features that have non-obvious gotchas. Example: you can give rendering hints for svg or any child shape nodes, like "crispEdges" so that straight lines are aligned to the pixel grid (plus it might turn off anti-aliasing, but that's another matter). Great-- I've got boxes with 1-pixel borders that should always be pixel aligned to look sharp, so I choose that. Then I notice that when I drag one of my "crispEdges" boxes to the right with the mouse, I get this weird flickering due to the "crisping" algorithm aliasing the sides of the box to the pixel grid in a way that changes the width of the visible box. (I.e., if I move the box 1 pixel to the right, the left side might align to the grid that is greater than xpos, while the right side might choose the grid that is floor(xpos).) As a result it looks like the box is "crawling" across the screen, or up the screen if you drag it vertically. So I went back to manually aligning those boxes to the pixel grid to guarantee consistent box size. 2. The "paint server" concept is an over-engineered mess. It's incompatible with CSS gradient spec which makes it a pain to figure out how to make CSS and future of SVG play well. Sane frameworks like Snap.svg abstract away that and anything else you'd likely find inside <defs> tags. (Also, someone here on HN mentioned that <defs> junk depends on the id to reference content, which easily creates nameclashes if you use multiple inline svgs.) 3. There's some churn in the DOM interface for SVG-related utils. For example, at some point I wanted to get access to normalized path instructions for a given SVG path. But Chrome recently deprecated the old way of doing that and is in the midst of replacing it with a new geometry interface. 4. The syntax for specifying an arc inside an SVG path is weird. Like, so weird that code in an SVG library I read obviously just went straight through the instructions listed in F.6.4/F.6.5 of the SVG spec (using the exact same variable names) to simply hand off the values to Cairo, and the library still had a bug somewhere. That one isn't really a big deal-- I'm just fascinated by how the spec writers favored endpoint parameterization consistency over the user's ability to draw a pie chart without having to ask questions on StackOverflow. 5. The complexity of the spec and its interaction with the other HTML5 specs is obviously a pain point for browser devs. Sometimes I use devTools to make a quick-and-dirty realtime codepen inside about:blank which just parses a contentEditable div and injects it as innerHTML of an SVG. It's nice because you can prototype things with patterns and gradients quite easily this way. Except you can't reference gradients/patterns/etc. in Firefox this way because of god-knows-what-conflict between about:blank's baseURL and SVG's funcIRI. (Although you can base64-encode the data and inject it as the src of an img under Firefox.) You see things like that all over. For example, the burgeoning web animations API looks really nice and works with SVG. But it works on CSS properties and not SVG attributes.
baybal2 9y ago
It has been almost 12 years, and we still don't have working word wrap with svg
- tannhaeuser 9y ago
  You can embed HTML within SVG via SVG's foreignObject, and use HTML/CSS text flow layout within embedded HTML. But it works only on rectangular shapes, and not on IE.
  - jancsika 9y ago
    You can also just absolutely position an HTML element on top of the SVG.
- ygra 9y ago
  We have it specified by now at least with SVG 2, but browser vendors have made it clear that they don want to support it at all, presumably because SVG 1.1 works well enough as a vector image format and more complexity and features could just be added by scripting. It felt a lot like browser vendors don't care about SVG at all beyond the extent that it's implemented at the moment. They also tend to break non-static SVG things all the time which further suggests that things like applications or animations built with SVG are definitely not a use case they cater for (or that those things are simply very rare on the top 500 sites they test).
pier25 9y ago
SVG is good as long as it's not abused. All the kb saving are meaningless with performance issues caused by lots of nodes, gradients, etc. It's great for responsive icons, but for a full interactive UI with illustrations bitmaps are the better choice IMO unless you really need dynamic scaling. Just because you can do it doesn't mean you should.
- etatoby 9y ago
  Beware of using it for responsive icons. Popular browsers render SVG icons orders of magnitude slower than fonts, with the same vector content and scalability. I recently had to convert an entire UI from SVG icons to fonts + bitmaps because the performance had gone down the drain, with just a few dozen different icons.
byron_fast 9y ago
It's nice that we've got the most valuable part of Flash: a vector rendering engine. I do miss Flash's editor for these types of content, though.
- CharlesW 9y ago
  > I do miss Flash's editor for these types of content, though. It's still here! It's now branded Animate CC[1], and (naturally) focuses on other output formats. [1] http://www.adobe.com/products/animate.html http://www.adobe.com/products/animate.html
  - byron_fast 9y ago
    Right! But is it SVG or only Canvas?
    - Someone 9y ago
      Canvas, WebGL, or "a potentially limitless number of platforms with the new Custom Platform Support SDK" (https://helpx.adobe.com/animate/how-to/publish-multiple-platforms.html https://helpx.adobe.com/animate/how-to/publish-multiple-plat...) The product itself can export to SVG (https://helpx.adobe.com/animate/how-to/export-image-svg.html https://helpx.adobe.com/animate/how-to/export-image-svg.html), but I get the impression that's only for individual frames. Edit: https://blogs.adobe.com/creativecloud/export-svg-animations-for-the-web-with-snap-svg/ https://blogs.adobe.com/creativecloud/export-svg-animations-... exports SVG animations, but only, it seems, for special types of documents ("From here you simply create a new “Snap.svg Animator” document type and begin creating content s you would normally. Publishing your content then generates a boilerplate HTML file along with all the assets you need, giving you an example of how to embed your animation into a webpage.")
- yosito 9y ago
  I just spent all day trying to manually wrangle SVG in the browser. I'd be happy with a good static SVG editor to be honest.
inthewoods 9y ago
We attempted to do a complex animation in SVG and the primary complaint was that it killed the browser in terms of CPU and memory usage. Are we doing something wrong?
- cooervo 9y ago
  lots of svg elements animated in conjunction will surely have a negative performance impact. At work we created a mind mapping tool, in where every node has events (drag, click, raggin, dragend, contextmenu, etc). After 200+ nodes the performance hit was very high. We had to stop redrawing the whole graph after every interaction. What a bummer.
- lioeters 9y ago
  I had the same experience using SVG to render music notation. We hit a performance issue - high CPU usage, skips/stutters - with several hundred to a thousand nodes, some animated. Switching to canvas increased that limit, in that we were able to keep smooth rendering with larger documents.
  - jononor 9y ago
    Did you render a whole document as one SVG, or do tricks like one SVG per line or sheet?
    - lioeters 9y ago
      The whole score was rendered as one SVG element, until we hit the performance limit. Now we're rendering each row of measures (a stack of staves) as a canvas element, and it performs much better for our purposes.
polymeris 9y ago
SVG works so fantastically well with React -- it's just part of the DOM, after all. Unless there are performance concerns, that reason alone would make me choose it over Canvas every time. Shameless plug, one of my first experiments with SVG+react (+cljs): https://polymeris.github.io/carlos/ https://polymeris.github.io/carlos/ Done in one day, without knowing the tech.
- meagher 9y ago
  Made this Chernoff ~Fish~ generator (http://meagher.co/chernoff-fish/ http://meagher.co/chernoff-fish/) with React and SVG. They are a great pair!
- smcnally 9y ago
  Very cool. You might need a seizure warning - [core.cljs] https://github.com/polymeris/carlos/blob/master/src/carlos/core.cljs https://github.com/polymeris/carlos/blob/master/src/carlos/c... and [svg.cljs] https://github.com/polymeris/carlos/blob/master/src/carlos/svg.cljs https://github.com/polymeris/carlos/blob/master/src/carlos/s... Look clear enough for me to follow. Thank you. Will work on this, too: (:require [carlos.core :as core])) * edit: clearer even unrendered
- Sophistifunk 9y ago
  Agreed. Going with SVG instead of something else to render the Jenkins pipeline graph has made our lives much easier when it comes time to make changes since we introduced it. For anybody interested in some example code mixing React and SVG the PipelineGraph component is here: https://github.com/jenkinsci/blueocean-plugin/blob/master/jenkins-design-language/src/js/components/PipelineGraph.jsx https://github.com/jenkinsci/blueocean-plugin/blob/master/je...
- abritinthebay 9y ago
  We do exactly this (SVG + React) at Bleacher Report. It’s basically the best of every world for us (visuals, code, etc) and we’re trying to convert as much as we can to this (takes a while... we have a LOT of logos for example)
- marcus_holmes 9y ago
vturner 9y ago
It's always been a curiosity of mine why SVG didn't get more attention from browsers through the years to solve the performance issues. It's open source, cross platform, "dynamic" in a sense AKA no compiling needed, light weight, supports shapes and text, offers immediate responsiveness, etc. Why the lack of love while we pour ever increasing energy into mangling HTML and CSS and every six months a new JS framework/module/whatever to try to make it work?
- deleted 9y ago
  [deleted]
- sAbakumoff 9y ago
  >>offers immediate responsiveness does it? Any examples of responsive grid system on SVG? What would be interesting.
  - k_sh 9y ago
    I think GP was referring to the fact that you don't need to generate SVG assets at multiple sizes for size/picture clarity balance, as you do with popular raster formats.
    - sAbakumoff 9y ago
      But GP was asking : "Why the lack of love while we pour ever increasing energy into mangling HTML and CSS" SVG can't be, shouldn't be and never will be the replacement for HTML/CSS/JS.
      - kitd 9y ago
        But GP's point is the opposite, that HTML/CSS/JS is being used too often for tasks that could be much more simply solved by SVG. I can think of a couple just in my current project.
        vturner 9y ago
geekit 9y ago
Make SVG great again!
- cooper12 9y ago
  Ugh can we not. This phrase is forever polluted, just like the Chaplin mustache or the pledge of allegiance salute before it.
  - monsieurbanana 9y ago
    Or the word feminism.
  - QAkICoU7IDNkpFu 9y ago
    >the pledge of allegiance salute It's called the [Bellamy salute](https://en.wikipedia.org/wiki/Bellamy_salute https://en.wikipedia.org/wiki/Bellamy_salute), which is based on the [Roman salute](https://en.wikipedia.org/wiki/Roman_salute https://en.wikipedia.org/wiki/Roman_salute). For those that want to know more :)
banhfun 9y ago
Ok great now that we know SVG is awesome, where do we begin learning how to use it like a pro?
- gschier 9y ago
  She also wrote a book: http://shop.oreilly.com/product/0636920045335.do http://shop.oreilly.com/product/0636920045335.do
esaym 9y ago
Her talk on the topic at vueconf was pretty good too https://youtu.be/gJDyhmL9O_E https://youtu.be/gJDyhmL9O_E
starmole 9y ago
This showcases what's wrong with SVG: It does way too much! To be useful as a vector image format, there should be strict rules (and less cruft). Why is there no libsvg like libjpeg or libpng? Why have interaction as part of an image format? SVG lives in an uncanny valley between jpeg and flash/js. I think there is still a big need for a real vector interchange and display format. Right now people pick a "good" subset of SVG. Or even fallback to fonts. My dream vector format: - Pixel perfect across implementations at 50%,100%,200% renderings. At least grid aligned lines. - Lossless roundtrip across apps. Start in Illustrator, edit parts in Inkscape, other parts in Animate, untouched things stay exactly the same. - Standard zero dependency C reference implementation: Stream in, bitmap out.
- mrb 9y ago
  There is https://www.w3.org/TR/SVGTiny12/ https://www.w3.org/TR/SVGTiny12/ which is a subset of SVG without scripting, without CSS styling. Not sure why it never gained more traction.
  - Jasper_ 9y ago
    Because SVG Tiny 1.2 still has support for scripting and CSS styling. https://www.w3.org/TR/SVGTiny12/styling.html https://www.w3.org/TR/SVGTiny12/styling.html https://www.w3.org/TR/SVGTiny12/script.html https://www.w3.org/TR/SVGTiny12/script.html
    - mrb 9y ago
      I trusted Wikipedia (which says otherwise) without checking the references. Argh!
    - vertex-four 9y ago
      It explicitly doesn't require that the engine do anything with the content of <script> tags, and CSS is explicitly unsupported - they simply use a small subset of properties from CSS as attributes.
  - starmole 9y ago
DylanBohlender 9y ago
This talk was one of the highlights of Develop Denver 2017 for me. Glad to see it getting some more traction.
- mkl 9y ago
  Thanks for the conference name. Were the talks videoed? If so, did they say when they'll be uploaded?
mikekchar 9y ago
One of funnest projects I worked on at Corel was called "Smart Graphics Studio" (I'm guessing most of the people who worked on it also read HN, so "Hi!"). It was an absolutely stupid idea: Some insane PGM read that XSLT could transform any XML into any other XML. Then they read that SVG was XML. They put 2 and 2 together and got a billion: You could draw a picture in SVG and then modify it intelligently (through XSLT) using some XML data set. Of course the opposite is actually a brilliant idea (at least at a time when XML was still popular): Take an XML dataset and visualise it in SVG using XSLT transformations (well... yeah... doing it all in XSLT is still insane, but you get the idea). Anyway, we built a very high performance SVG viewer (for the time, anyway) from scratch. We built an SVG/Javascript widget library. We built an incredibly impressive data manipulation library in XSLT (ok... yeah... insane). Fun times. And all nearly 20 years ago. It really was ahead of its time. Of course the end finally had to come. The PGMs sold this thing to a certain aviation company with the promise that it would automatically build circuit diagrams from their XML chipset database (because.... XSLT!) When Vector took over Corel, they very rightly dropped our division like a hot potato (we had something like 3 PGMs per developer). It was quite unfortunate because the developers and QA people I worked with there were some of the best I've every had the pleasure of working with. I've always waited for something to come of SVG and really wish we had been able to release something that wasn't crazy so that people could see what the potential was. Edit: In my old age I'm losing track of time. It seems that Vector acquired Corel in 2003, so that's only 15 years ago :-)
- tech2 9y ago
  Or, for the slightly more insane approach we (and by that I mean people in my organisation prior to my arrival) decided that XSLT was the right tool to transform XML to Python. XML to XML sounds like a walk in the park after that. :)
- yborg 9y ago
  I guess I'm dumb, but I have no idea what 'PGM' is supposed to mean in this context.
  - biztos 9y ago
giancarlostoro 9y ago
Have not seen anyone mention it, but does it make sense to do Web Game development using SVG's with JavaScript? Has anyone tried this? Is it as fun as these slides make it seem or are there downsides to that approach?
- thaumasiotes 9y ago
  Isn't that basically Flash? It seemed like a popular way to do web games.
- firmgently 9y ago
  I think you'd want to combine it with canvas to replicate Flash's cacheAsBitmap. As others have mentioned here though the decisions on where to use it (raster vs vector) and where not to use it need to be made carefully as your map of bits uses memory [(width x height x 3 or 4 for RGB/RGBA) bytes - soon adds up but maybe browser renderers optimise this somehow] in exchange for what you save on drawing calculations. cacheAsBitmap brought a major performance boost to Flash when used wisely though. Maybe some libraries can handle this for you nowadays?
kayamon 9y ago
By "SVG can do that?", it appears they actually just meant "JavaScript can do that?", as all the cool animations and stuff are all just JS-driven. Unless I misread it?
- nicky0 9y ago
  Driven by JS and rendered using SVG.
- callumlocke 9y ago
  If only there were a widely installed runtime where SVG and JavaScript could be used together
- logicuce 9y ago
  This. Had a lengthy discussion exactly on this point in context of this very article couple of days back in office :) Totally agree with you!
jankovicsandras 9y ago
Shameless plug: ImageTracer is a simple raster image tracer and vectorizer that outputs SVG, 100% free, Public Domain. Available in JavaScript (works both in the browser and with Node.js), "desktop" Java and "Android" Java: https://github.com/jankovicsandras/imagetracerjs https://github.com/jankovicsandras/imagetracerjs https://github.com/jankovicsandras/imagetracerjava https://github.com/jankovicsandras/imagetracerjava https://github.com/jankovicsandras/imagetracerandroid https://github.com/jankovicsandras/imagetracerandroid
- anilgulecha 9y ago
  Wow, this is cool. It looks like an API capable of things that Vector Magic[1] can do, but FOSS. Vector Magic has been excellent for some occasions where you have a rasterized clipart, but need it as a vector. [1]https://vectormagic.com/ https://vectormagic.com/
  - Tajnymag 9y ago
    Inkscape does have such a feature too. While importing a bitmap image, you can specifically "convert" it to vector graphic. Works fairly well.
    - anilgulecha 9y ago
      I love and use Inkscape exclusively for any SVG editing, but this particular feature in Inkscape is woefully under anything I've seen vector magic provides.
      - jinqueeny 9y ago
        I love using Inkscape too. Never realized it has such a feature. Couldn't help trying it out.
      - jansho 9y ago
        The trick is to make sure the raster image is as clean as possible. But yeah I agree, this is not its best feature.
oelmekki 9y ago
I wonder if we should encourage print designers to switch to svg (that is, if they don't already... it's not a world I know much). I have in mind all those concerts or various events' png/jpeg files that are dropped on the web here and there. If they were svg files, it would be made easier for search engines to index their content. Even without that, svg totally rocks. About a decade ago, I played with SVGWeb and made a showcase carousel presenting screenshots of projets with automated reflection on them (like it was common back then, a reverse image on bottom of actual image with a gradient from transparency to white to make an effect like if the ground was a mirror). I just had to upload a plain screenshot and everything was automated, I was mind blown, and surprised we seemed to go the canvas way instead (not so much, in retrospect). Nowadays, I often make my icons as svg react components. It makes it so much easier to change their color or saturation on hover, this is very cool. We probably still have a long way to go to exploit all of svg potential.
- firmgently 9y ago
  If they're designing in Illustrator as most are they're usually working with vectors and have to use export to create their PNG/JPEG; SVG is right there as an export option. In my experience there's heavy inertia in the world of print though.
intellix 9y ago
Cool, but they're still not really supported by Safari
11235813213455 9y ago
I'm trying to rewrite the good plugins of svgo into https://github.com/caub/svgz https://github.com/caub/svgz, something more flexible based on jsdom
b0rsuk 9y ago
Flash has the "advantage" that it's used almost exclusively for advertisments. Mostly pretentious people (artists, photographers etc) have websites made of flash. So, by turning off Flash, you block the bulk of annoying ads. And you lose little by disabling Flash. Would the same be true for SVG ? Would it be used mostly for ads, too ? Or even, can you selectively block only the SVG used for advertisments ?
- dredmorbius 9y ago
  Unfortunately, that seems to be one of the bigger hazards for SVG. It really is an amazing graphical tool. David Dailey has been posting some amazing stuff on Ello: https://ello.co/ddailey https://ello.co/ddailey (Which also uses SVG for most of its icons and buttons.) But ... the potential for advertising/marketing abuse (or just sheer bad design / misuse) is so high. Unless there's a way to quash it.... Sigh. This is why we can't have nice things.
vbuwivbiu 9y ago
Shame Flexbox can't be used with SVG
vladdanilov 9y ago
The SVGO-GUI has not been updated since 2015. I added out-of-the-box SVG optimization to my Optimage [1]. Fun fact: Node.js binary can be just 3MB compressed. ImageOptim [2] handles SVGs as well if Node.js is installed. The transparent JPEG-in-SVG files can also be made with nothing but ImageMagick and Bash [3]. [1] http://getoptimage.com http://getoptimage.com [2] https://imageoptim.com/mac https://imageoptim.com/mac [3] https://github.com/vmdanilov/svgize https://github.com/vmdanilov/svgize
Robotbeat 9y ago
I've used SVG to design custom PCBs using traces as magnetic coils, something that, surprisingly, doesn't have a good industrial software package for. Everything in PCB design software is geared toward routing wires conveniently between components, but if you try to actually use the wires as actual components, it's almost impossible to freely design. And even regular PCB design software feels almost unchanged since the 1980s or 1990s. Incredibly clunky. Here's a good Hackaday article on converting SVG to PCB file formats: http://hackaday.com/2016/01/28/beautiful-and-bizarre-boards/ http://hackaday.com/2016/01/28/beautiful-and-bizarre-boards/ PCBModE is one package I tried for a while: http://pcbmode.com/ http://pcbmode.com/ Boldport uses this toolchain to make beautiful PCBs relying heavily on SVG: https://www.boldport.com/ https://www.boldport.com/ I had a hard time with all these packages, however, and ended up just hacking it together by hand with python code and outputting in KiCAD format. I wasn't even able to get KiCAD to read/render it properly (too many weird elements), but since OSH Park (where I got my PCBs from) takes KiCAD format directly and gives you a preview, that all worked fine, and when I ordered my PCBs, they arrived in working condition just fine the first time. https://oshpark.com/ https://oshpark.com/ So yeah, SVG can do a lot, including make funky PCBs.
- stephen_g 9y ago
  Altium can do that sort of thing fairly easily. We use it for boards with waveguide filters, couplers, etc. (usually the geometry is designed and simulated in a field solver first, and then imported in, but you can do it straight in the software if you want). The easiest way is to design the coil as a part, but you can use traces and arcs and stuff like normal in that.
  - Robotbeat 9y ago
    That works well if your coil component is small and is just acting as a microwave RF component or something, but in my case I had a pretty complicated coil design (although simple conceptually) that spanned the entire PCB and interwove with other coils and wasn't arranged in a simple rectilinear manner. My original plan was to design the whole thing in Solidworks, which I did (and it was pretty easy to do), but there was simply no easy way to convert that into an actual PCB for manufacture (there is a Circuitworks module, but it's designed only for importing circuits to design around in Solidworks, not the other direction). Sitting there and manually making arcs and such in the PCB design software was just a non-starter. There are no parametric modeling features to speak of, and it's actually way easier to do what I did. I think I used OpenSCAD to export to SVG.
mtea 9y ago
Welp, time to learn SVG! So much more functionality than CSS. Gorgeous examples. I wonder if it's much slower to load though?
sr3d 9y ago
This is a very inspirational presentation. I'm blown away. SVG can be the solution our next wave of interaction now that Flash has almost completely died.

SVG can do that?

645 points by funspectre 9y ago

nimish 9y ago

I pray for screen readers.

debaserab2 9y ago
What image format do you recommend that would work better on a screen reader?
- swiley 9y ago
  Maybe people are overusing images and part of the way they mentally justify it is vector graphics?
- wscott 9y ago
  The article is proposing SVG for rendering responsive text for articles. So the screen reader comment is valid.
  - tedunangst 9y ago
    The text is all there, isn't? The first demo I liked at used svg to rearrange the page, but all the text would render like normal. Probably even works with a text only browser.
  - prezjordan 9y ago
    It is not, <text> is picked up by screen-readers without any issue.
    - dredmorbius 9y ago
      In what order? Have you ever looked at a text dump of a PDF? Assuming it's a text-PDF in the first place, there's no guarantee that it's in any sensible order. Of course, most Web writing is pastiche anyway.
spdustin 9y ago
SVGs are actually quite accessible to assistive technology. Here are some tips I used for a recent demonstration: https://www.sitepoint.com/tips-accessible-svg/ https://www.sitepoint.com/tips-accessible-svg/

khanhkid 9y ago

It's awesome. last time, I using SVG to import image to pdf files (using TCPDF). The quality is clearly & beautiful. Now, Thank you for your introduction about another things SVG can do on the website.

kevinb7 9y ago

While SVG can do a lot, there are certain things that it isn't optimized for. In particular animating lots of shapes simultaneously. The animation of the globe exploding into a bunch of triangles from the slides is a good (bad?) example of this. Also, there can also be inconsistencies is in the rendering of SVGs between browsers.

abritinthebay 9y ago
That’s not really SVG that’s being bad there - it’s that browsers haven’t optimized for it. They will if more people use it. SVG in Chrome can be particularly painful due to their mediocre support of some things (sometimes outright contradicting the spec). That’s a vendor issue tho, nothing intrinsic to the format.
- ygra 9y ago
  Ironically we found that IE had the best SVG performance for quite a while (by now the others have mostly caught up). And then they broke a lot of things behaviour-wise in Edge again for quite some time. Performance was still great, but if your image doesn't look like it should it doesn't help.
  - abritinthebay 9y ago
    True, though I’ve often found you have to be doing some rather obscure or strange things to screw up basic display Or advanced CSS.

flamedoge 9y ago

Very cool. SVGs can be very sensible choice for certain applications that canvas doesn't cover well.

Jack000 9y ago

coming soon, full SVG websites featuring: - loading bar until website is fully loaded - animated buttons that bounce and flash - full screen 2 second transitions from page to page - all in one page, no urls! feels like 2010 again : ]

Brian_K_White 9y ago

Wow, svg sits there and does mostly nothing on my phone. Just like Flash! Can't pinch to zoom to read the text that was too small, just like Flash! Half the supposedly neat interactive gewgaws like "turn this gear" didn't react to any presses or gestures at all. Just like Flash!

tedunangst 9y ago
Are you clicking on the animated gif of the demo or did you follow the link to the demo?
cstrat 9y ago
In the OP's linked slideshow those are just videos playing and not interactive demos (except for the CodePen one)
aidos 9y ago
Events can be attached to SVG elements just like any other element in the dom. Pinch to zoom / pan etc can all be implemented fine. Your complaints might hold true with certain demos, but they're not limitations of SVG

noonespecial 9y ago

I use svg all the time to make tiny web interfaces for embedded systems. When the entire web app has to fit in 350k, you don't have space for gif's or jpg's.

exikyut 9y ago
That's very interesting. Would be cool to see a generalized example of the kinds of interfaces you're building.
- noonespecial 9y ago
  The most impressive rabbit I've pulled out of the SVG hat in this regard is being given a 2.1MB logo and told that it had to appear full screen during the log in and be "crisp and not all jaggy". Did it in about 900 bytes.
  - jiggunjer 9y ago
    With inkscape?
    - noonespecial 9y ago
      You got it. Imported the jpg and traced it with Inkscape. Hand optimized the SVG and inlined it right into the html of the login page.
      - Veratyr 9y ago
        Logos are typically shipped in SVG or Adobe Illustrator format aren't they? Even the old style ones had technical specifications. Seems odd you'd have to hand trace a JPEG.
        noonespecial 9y ago
        Ha! Yeah. I think maybe you and I might travel in slightly different circles.

jordache 9y ago

SVG has the opposite performance profile of Canvas. SVG hits a performance ceiling as number of elements increases. Canvas, since it's rasterized image can handle a rasterized representation of millions of SVG elements. However as Canvas dimension increase, it will hit a performance ceiling.

TazeTSchnitzel 9y ago
In my experience, canvas 2D also has a number-of-elements performance ceiling if you're drawing things rather than using images, which feels like it defeats the purpose. For example, try drawing hundreds of coloured rectangles per frame. Easy, right? If you're using WebGL, or any sensible graphics API, yes. If you're using canvas, the web-browser will parse and re-parse your colour expression CSS n times per frame. Enjoy your 100% CPU usage.
- jordache 9y ago
  > has a number-of-elements performance ceiling if you're drawing things rather than using images, which feels like it defeats the purpose. Well you can generate your imagery programmatically and then render it to canvas as a raster image. Canvas is not purely for implementing a web based drawing app.
  - icebraining 9y ago
    But you can also embed a raster image in SVG.
    - jordache 9y ago
      The context of the discussion is to leverage SVG's DOM based approach to render on screen elements
  - TazeTSchnitzel 9y ago
    Software rasterisation is slow and power-inefficient, and does not scale particularly well with screen size.

mamcx 9y ago

So, how crazy to use SVG for a cross-platform UI?

jancsika 9y ago
I did that. It works ok. Some gotchas: 1. SVG has all these seemingly useful features that have non-obvious gotchas. Example: you can give rendering hints for svg or any child shape nodes, like "crispEdges" so that straight lines are aligned to the pixel grid (plus it might turn off anti-aliasing, but that's another matter). Great-- I've got boxes with 1-pixel borders that should always be pixel aligned to look sharp, so I choose that. Then I notice that when I drag one of my "crispEdges" boxes to the right with the mouse, I get this weird flickering due to the "crisping" algorithm aliasing the sides of the box to the pixel grid in a way that changes the width of the visible box. (I.e., if I move the box 1 pixel to the right, the left side might align to the grid that is greater than xpos, while the right side might choose the grid that is floor(xpos).) As a result it looks like the box is "crawling" across the screen, or up the screen if you drag it vertically. So I went back to manually aligning those boxes to the pixel grid to guarantee consistent box size. 2. The "paint server" concept is an over-engineered mess. It's incompatible with CSS gradient spec which makes it a pain to figure out how to make CSS and future of SVG play well. Sane frameworks like Snap.svg abstract away that and anything else you'd likely find inside <defs> tags. (Also, someone here on HN mentioned that <defs> junk depends on the id to reference content, which easily creates nameclashes if you use multiple inline svgs.) 3. There's some churn in the DOM interface for SVG-related utils. For example, at some point I wanted to get access to normalized path instructions for a given SVG path. But Chrome recently deprecated the old way of doing that and is in the midst of replacing it with a new geometry interface. 4. The syntax for specifying an arc inside an SVG path is weird. Like, so weird that code in an SVG library I read obviously just went straight through the instructions listed in F.6.4/F.6.5 of the SVG spec (using the exact same variable names) to simply hand off the values to Cairo, and the library still had a bug somewhere. That one isn't really a big deal-- I'm just fascinated by how the spec writers favored endpoint parameterization consistency over the user's ability to draw a pie chart without having to ask questions on StackOverflow. 5. The complexity of the spec and its interaction with the other HTML5 specs is obviously a pain point for browser devs. Sometimes I use devTools to make a quick-and-dirty realtime codepen inside about:blank which just parses a contentEditable div and injects it as innerHTML of an SVG. It's nice because you can prototype things with patterns and gradients quite easily this way. Except you can't reference gradients/patterns/etc. in Firefox this way because of god-knows-what-conflict between about:blank's baseURL and SVG's funcIRI. (Although you can base64-encode the data and inject it as the src of an img under Firefox.) You see things like that all over. For example, the burgeoning web animations API looks really nice and works with SVG. But it works on CSS properties and not SVG attributes.

baybal2 9y ago

It has been almost 12 years, and we still don't have working word wrap with svg

tannhaeuser 9y ago
You can embed HTML within SVG via SVG's foreignObject, and use HTML/CSS text flow layout within embedded HTML. But it works only on rectangular shapes, and not on IE.
- jancsika 9y ago
  You can also just absolutely position an HTML element on top of the SVG.
ygra 9y ago
We have it specified by now at least with SVG 2, but browser vendors have made it clear that they don want to support it at all, presumably because SVG 1.1 works well enough as a vector image format and more complexity and features could just be added by scripting. It felt a lot like browser vendors don't care about SVG at all beyond the extent that it's implemented at the moment. They also tend to break non-static SVG things all the time which further suggests that things like applications or animations built with SVG are definitely not a use case they cater for (or that those things are simply very rare on the top 500 sites they test).

pier25 9y ago

SVG is good as long as it's not abused. All the kb saving are meaningless with performance issues caused by lots of nodes, gradients, etc. It's great for responsive icons, but for a full interactive UI with illustrations bitmaps are the better choice IMO unless you really need dynamic scaling. Just because you can do it doesn't mean you should.

etatoby 9y ago
Beware of using it for responsive icons. Popular browsers render SVG icons orders of magnitude slower than fonts, with the same vector content and scalability. I recently had to convert an entire UI from SVG icons to fonts + bitmaps because the performance had gone down the drain, with just a few dozen different icons.

byron_fast 9y ago

It's nice that we've got the most valuable part of Flash: a vector rendering engine. I do miss Flash's editor for these types of content, though.

CharlesW 9y ago
> I do miss Flash's editor for these types of content, though. It's still here! It's now branded Animate CC[1], and (naturally) focuses on other output formats. [1] http://www.adobe.com/products/animate.html http://www.adobe.com/products/animate.html
- byron_fast 9y ago
  Right! But is it SVG or only Canvas?
  - Someone 9y ago
    Canvas, WebGL, or "a potentially limitless number of platforms with the new Custom Platform Support SDK" (https://helpx.adobe.com/animate/how-to/publish-multiple-platforms.html https://helpx.adobe.com/animate/how-to/publish-multiple-plat...) The product itself can export to SVG (https://helpx.adobe.com/animate/how-to/export-image-svg.html https://helpx.adobe.com/animate/how-to/export-image-svg.html), but I get the impression that's only for individual frames. Edit: https://blogs.adobe.com/creativecloud/export-svg-animations-for-the-web-with-snap-svg/ https://blogs.adobe.com/creativecloud/export-svg-animations-... exports SVG animations, but only, it seems, for special types of documents ("From here you simply create a new “Snap.svg Animator” document type and begin creating content s you would normally. Publishing your content then generates a boilerplate HTML file along with all the assets you need, giving you an example of how to embed your animation into a webpage.")
yosito 9y ago
I just spent all day trying to manually wrangle SVG in the browser. I'd be happy with a good static SVG editor to be honest.

inthewoods 9y ago

We attempted to do a complex animation in SVG and the primary complaint was that it killed the browser in terms of CPU and memory usage. Are we doing something wrong?

cooervo 9y ago
lots of svg elements animated in conjunction will surely have a negative performance impact. At work we created a mind mapping tool, in where every node has events (drag, click, raggin, dragend, contextmenu, etc). After 200+ nodes the performance hit was very high. We had to stop redrawing the whole graph after every interaction. What a bummer.
lioeters 9y ago
I had the same experience using SVG to render music notation. We hit a performance issue - high CPU usage, skips/stutters - with several hundred to a thousand nodes, some animated. Switching to canvas increased that limit, in that we were able to keep smooth rendering with larger documents.
- jononor 9y ago
  Did you render a whole document as one SVG, or do tricks like one SVG per line or sheet?
  - lioeters 9y ago
    The whole score was rendered as one SVG element, until we hit the performance limit. Now we're rendering each row of measures (a stack of staves) as a canvas element, and it performs much better for our purposes.

polymeris 9y ago

SVG works so fantastically well with React -- it's just part of the DOM, after all. Unless there are performance concerns, that reason alone would make me choose it over Canvas every time. Shameless plug, one of my first experiments with SVG+react (+cljs): https://polymeris.github.io/carlos/ https://polymeris.github.io/carlos/ Done in one day, without knowing the tech.

meagher 9y ago
Made this Chernoff ~Fish~ generator (http://meagher.co/chernoff-fish/ http://meagher.co/chernoff-fish/) with React and SVG. They are a great pair!
smcnally 9y ago
Very cool. You might need a seizure warning - [core.cljs] https://github.com/polymeris/carlos/blob/master/src/carlos/core.cljs https://github.com/polymeris/carlos/blob/master/src/carlos/c... and [svg.cljs] https://github.com/polymeris/carlos/blob/master/src/carlos/svg.cljs https://github.com/polymeris/carlos/blob/master/src/carlos/s... Look clear enough for me to follow. Thank you. Will work on this, too: (:require [carlos.core :as core])) * edit: clearer even unrendered
Sophistifunk 9y ago
Agreed. Going with SVG instead of something else to render the Jenkins pipeline graph has made our lives much easier when it comes time to make changes since we introduced it. For anybody interested in some example code mixing React and SVG the PipelineGraph component is here: https://github.com/jenkinsci/blueocean-plugin/blob/master/jenkins-design-language/src/js/components/PipelineGraph.jsx https://github.com/jenkinsci/blueocean-plugin/blob/master/je...
abritinthebay 9y ago
We do exactly this (SVG + React) at Bleacher Report. It’s basically the best of every world for us (visuals, code, etc) and we’re trying to convert as much as we can to this (takes a while... we have a LOT of logos for example)
marcus_holmes 9y ago

vturner 9y ago

It's always been a curiosity of mine why SVG didn't get more attention from browsers through the years to solve the performance issues. It's open source, cross platform, "dynamic" in a sense AKA no compiling needed, light weight, supports shapes and text, offers immediate responsiveness, etc. Why the lack of love while we pour ever increasing energy into mangling HTML and CSS and every six months a new JS framework/module/whatever to try to make it work?

deleted 9y ago
[deleted]
sAbakumoff 9y ago
>>offers immediate responsiveness does it? Any examples of responsive grid system on SVG? What would be interesting.
- k_sh 9y ago
  I think GP was referring to the fact that you don't need to generate SVG assets at multiple sizes for size/picture clarity balance, as you do with popular raster formats.
  - sAbakumoff 9y ago
    But GP was asking : "Why the lack of love while we pour ever increasing energy into mangling HTML and CSS" SVG can't be, shouldn't be and never will be the replacement for HTML/CSS/JS.
    - kitd 9y ago
      But GP's point is the opposite, that HTML/CSS/JS is being used too often for tasks that could be much more simply solved by SVG. I can think of a couple just in my current project.
      - vturner 9y ago

geekit 9y ago

Make SVG great again!

cooper12 9y ago
Ugh can we not. This phrase is forever polluted, just like the Chaplin mustache or the pledge of allegiance salute before it.
- monsieurbanana 9y ago
  Or the word feminism.
- QAkICoU7IDNkpFu 9y ago
  >the pledge of allegiance salute It's called the [Bellamy salute](https://en.wikipedia.org/wiki/Bellamy_salute https://en.wikipedia.org/wiki/Bellamy_salute), which is based on the [Roman salute](https://en.wikipedia.org/wiki/Roman_salute https://en.wikipedia.org/wiki/Roman_salute). For those that want to know more :)

banhfun 9y ago

Ok great now that we know SVG is awesome, where do we begin learning how to use it like a pro?

gschier 9y ago
She also wrote a book: http://shop.oreilly.com/product/0636920045335.do http://shop.oreilly.com/product/0636920045335.do

esaym 9y ago

Her talk on the topic at vueconf was pretty good too https://youtu.be/gJDyhmL9O_E https://youtu.be/gJDyhmL9O_E

starmole 9y ago

This showcases what's wrong with SVG: It does way too much! To be useful as a vector image format, there should be strict rules (and less cruft). Why is there no libsvg like libjpeg or libpng? Why have interaction as part of an image format? SVG lives in an uncanny valley between jpeg and flash/js. I think there is still a big need for a real vector interchange and display format. Right now people pick a "good" subset of SVG. Or even fallback to fonts. My dream vector format: - Pixel perfect across implementations at 50%,100%,200% renderings. At least grid aligned lines. - Lossless roundtrip across apps. Start in Illustrator, edit parts in Inkscape, other parts in Animate, untouched things stay exactly the same. - Standard zero dependency C reference implementation: Stream in, bitmap out.

mrb 9y ago
There is https://www.w3.org/TR/SVGTiny12/ https://www.w3.org/TR/SVGTiny12/ which is a subset of SVG without scripting, without CSS styling. Not sure why it never gained more traction.
- Jasper_ 9y ago
  Because SVG Tiny 1.2 still has support for scripting and CSS styling. https://www.w3.org/TR/SVGTiny12/styling.html https://www.w3.org/TR/SVGTiny12/styling.html https://www.w3.org/TR/SVGTiny12/script.html https://www.w3.org/TR/SVGTiny12/script.html
  - mrb 9y ago
    I trusted Wikipedia (which says otherwise) without checking the references. Argh!
  - vertex-four 9y ago
    It explicitly doesn't require that the engine do anything with the content of <script> tags, and CSS is explicitly unsupported - they simply use a small subset of properties from CSS as attributes.
- starmole 9y ago

DylanBohlender 9y ago

This talk was one of the highlights of Develop Denver 2017 for me. Glad to see it getting some more traction.

mkl 9y ago
Thanks for the conference name. Were the talks videoed? If so, did they say when they'll be uploaded?

mikekchar 9y ago

One of funnest projects I worked on at Corel was called "Smart Graphics Studio" (I'm guessing most of the people who worked on it also read HN, so "Hi!"). It was an absolutely stupid idea: Some insane PGM read that XSLT could transform any XML into any other XML. Then they read that SVG was XML. They put 2 and 2 together and got a billion: You could draw a picture in SVG and then modify it intelligently (through XSLT) using some XML data set. Of course the opposite is actually a brilliant idea (at least at a time when XML was still popular): Take an XML dataset and visualise it in SVG using XSLT transformations (well... yeah... doing it all in XSLT is still insane, but you get the idea). Anyway, we built a very high performance SVG viewer (for the time, anyway) from scratch. We built an SVG/Javascript widget library. We built an incredibly impressive data manipulation library in XSLT (ok... yeah... insane). Fun times. And all nearly 20 years ago. It really was ahead of its time. Of course the end finally had to come. The PGMs sold this thing to a certain aviation company with the promise that it would automatically build circuit diagrams from their XML chipset database (because.... XSLT!) When Vector took over Corel, they very rightly dropped our division like a hot potato (we had something like 3 PGMs per developer). It was quite unfortunate because the developers and QA people I worked with there were some of the best I've every had the pleasure of working with. I've always waited for something to come of SVG and really wish we had been able to release something that wasn't crazy so that people could see what the potential was. Edit: In my old age I'm losing track of time. It seems that Vector acquired Corel in 2003, so that's only 15 years ago :-)

tech2 9y ago
Or, for the slightly more insane approach we (and by that I mean people in my organisation prior to my arrival) decided that XSLT was the right tool to transform XML to Python. XML to XML sounds like a walk in the park after that. :)
yborg 9y ago
I guess I'm dumb, but I have no idea what 'PGM' is supposed to mean in this context.
- biztos 9y ago

giancarlostoro 9y ago

Have not seen anyone mention it, but does it make sense to do Web Game development using SVG's with JavaScript? Has anyone tried this? Is it as fun as these slides make it seem or are there downsides to that approach?

thaumasiotes 9y ago
Isn't that basically Flash? It seemed like a popular way to do web games.
firmgently 9y ago
I think you'd want to combine it with canvas to replicate Flash's cacheAsBitmap. As others have mentioned here though the decisions on where to use it (raster vs vector) and where not to use it need to be made carefully as your map of bits uses memory [(width x height x 3 or 4 for RGB/RGBA) bytes - soon adds up but maybe browser renderers optimise this somehow] in exchange for what you save on drawing calculations. cacheAsBitmap brought a major performance boost to Flash when used wisely though. Maybe some libraries can handle this for you nowadays?

kayamon 9y ago

By "SVG can do that?", it appears they actually just meant "JavaScript can do that?", as all the cool animations and stuff are all just JS-driven. Unless I misread it?

nicky0 9y ago
Driven by JS and rendered using SVG.
callumlocke 9y ago
If only there were a widely installed runtime where SVG and JavaScript could be used together
logicuce 9y ago
This. Had a lengthy discussion exactly on this point in context of this very article couple of days back in office :) Totally agree with you!

jankovicsandras 9y ago

Shameless plug: ImageTracer is a simple raster image tracer and vectorizer that outputs SVG, 100% free, Public Domain. Available in JavaScript (works both in the browser and with Node.js), "desktop" Java and "Android" Java: https://github.com/jankovicsandras/imagetracerjs https://github.com/jankovicsandras/imagetracerjs https://github.com/jankovicsandras/imagetracerjava https://github.com/jankovicsandras/imagetracerjava https://github.com/jankovicsandras/imagetracerandroid https://github.com/jankovicsandras/imagetracerandroid

anilgulecha 9y ago
Wow, this is cool. It looks like an API capable of things that Vector Magic[1] can do, but FOSS. Vector Magic has been excellent for some occasions where you have a rasterized clipart, but need it as a vector. [1]https://vectormagic.com/ https://vectormagic.com/
- Tajnymag 9y ago
  Inkscape does have such a feature too. While importing a bitmap image, you can specifically "convert" it to vector graphic. Works fairly well.
  - anilgulecha 9y ago
    I love and use Inkscape exclusively for any SVG editing, but this particular feature in Inkscape is woefully under anything I've seen vector magic provides.
    - jinqueeny 9y ago
      I love using Inkscape too. Never realized it has such a feature. Couldn't help trying it out.
    - jansho 9y ago
      The trick is to make sure the raster image is as clean as possible. But yeah I agree, this is not its best feature.

oelmekki 9y ago

I wonder if we should encourage print designers to switch to svg (that is, if they don't already... it's not a world I know much). I have in mind all those concerts or various events' png/jpeg files that are dropped on the web here and there. If they were svg files, it would be made easier for search engines to index their content. Even without that, svg totally rocks. About a decade ago, I played with SVGWeb and made a showcase carousel presenting screenshots of projets with automated reflection on them (like it was common back then, a reverse image on bottom of actual image with a gradient from transparency to white to make an effect like if the ground was a mirror). I just had to upload a plain screenshot and everything was automated, I was mind blown, and surprised we seemed to go the canvas way instead (not so much, in retrospect). Nowadays, I often make my icons as svg react components. It makes it so much easier to change their color or saturation on hover, this is very cool. We probably still have a long way to go to exploit all of svg potential.

firmgently 9y ago
If they're designing in Illustrator as most are they're usually working with vectors and have to use export to create their PNG/JPEG; SVG is right there as an export option. In my experience there's heavy inertia in the world of print though.

intellix 9y ago

Cool, but they're still not really supported by Safari

11235813213455 9y ago

I'm trying to rewrite the good plugins of svgo into https://github.com/caub/svgz https://github.com/caub/svgz, something more flexible based on jsdom

b0rsuk 9y ago

Flash has the "advantage" that it's used almost exclusively for advertisments. Mostly pretentious people (artists, photographers etc) have websites made of flash. So, by turning off Flash, you block the bulk of annoying ads. And you lose little by disabling Flash. Would the same be true for SVG ? Would it be used mostly for ads, too ? Or even, can you selectively block only the SVG used for advertisments ?

dredmorbius 9y ago
Unfortunately, that seems to be one of the bigger hazards for SVG. It really is an amazing graphical tool. David Dailey has been posting some amazing stuff on Ello: https://ello.co/ddailey https://ello.co/ddailey (Which also uses SVG for most of its icons and buttons.) But ... the potential for advertising/marketing abuse (or just sheer bad design / misuse) is so high. Unless there's a way to quash it.... Sigh. This is why we can't have nice things.

vbuwivbiu 9y ago

Shame Flexbox can't be used with SVG

vladdanilov 9y ago

The SVGO-GUI has not been updated since 2015. I added out-of-the-box SVG optimization to my Optimage [1]. Fun fact: Node.js binary can be just 3MB compressed. ImageOptim [2] handles SVGs as well if Node.js is installed. The transparent JPEG-in-SVG files can also be made with nothing but ImageMagick and Bash [3]. [1] http://getoptimage.com http://getoptimage.com [2] https://imageoptim.com/mac https://imageoptim.com/mac [3] https://github.com/vmdanilov/svgize https://github.com/vmdanilov/svgize

Robotbeat 9y ago

I've used SVG to design custom PCBs using traces as magnetic coils, something that, surprisingly, doesn't have a good industrial software package for. Everything in PCB design software is geared toward routing wires conveniently between components, but if you try to actually use the wires as actual components, it's almost impossible to freely design. And even regular PCB design software feels almost unchanged since the 1980s or 1990s. Incredibly clunky. Here's a good Hackaday article on converting SVG to PCB file formats: http://hackaday.com/2016/01/28/beautiful-and-bizarre-boards/ http://hackaday.com/2016/01/28/beautiful-and-bizarre-boards/ PCBModE is one package I tried for a while: http://pcbmode.com/ http://pcbmode.com/ Boldport uses this toolchain to make beautiful PCBs relying heavily on SVG: https://www.boldport.com/ https://www.boldport.com/ I had a hard time with all these packages, however, and ended up just hacking it together by hand with python code and outputting in KiCAD format. I wasn't even able to get KiCAD to read/render it properly (too many weird elements), but since OSH Park (where I got my PCBs from) takes KiCAD format directly and gives you a preview, that all worked fine, and when I ordered my PCBs, they arrived in working condition just fine the first time. https://oshpark.com/ https://oshpark.com/ So yeah, SVG can do a lot, including make funky PCBs.

stephen_g 9y ago
Altium can do that sort of thing fairly easily. We use it for boards with waveguide filters, couplers, etc. (usually the geometry is designed and simulated in a field solver first, and then imported in, but you can do it straight in the software if you want). The easiest way is to design the coil as a part, but you can use traces and arcs and stuff like normal in that.
- Robotbeat 9y ago
  That works well if your coil component is small and is just acting as a microwave RF component or something, but in my case I had a pretty complicated coil design (although simple conceptually) that spanned the entire PCB and interwove with other coils and wasn't arranged in a simple rectilinear manner. My original plan was to design the whole thing in Solidworks, which I did (and it was pretty easy to do), but there was simply no easy way to convert that into an actual PCB for manufacture (there is a Circuitworks module, but it's designed only for importing circuits to design around in Solidworks, not the other direction). Sitting there and manually making arcs and such in the PCB design software was just a non-starter. There are no parametric modeling features to speak of, and it's actually way easier to do what I did. I think I used OpenSCAD to export to SVG.

mtea 9y ago

Welp, time to learn SVG! So much more functionality than CSS. Gorgeous examples. I wonder if it's much slower to load though?

sr3d 9y ago

This is a very inspirational presentation. I'm blown away. SVG can be the solution our next wave of interaction now that Flash has almost completely died.