4 ms·

You don't edit raw png values either, with rgb/index values in a list. SVGs are meant to be created and used like any image file. The fact that they are almost

• Eisfunke 6y ago
  Yes, but SVG is not good as a machine-focused format as well, that's kind of the point.
• dillondoyle 6y ago
  I like this kind of compromise where illustrator etc generates the SVG but you can read elements in the actual text so you can animate or transform with css or js. Fir example I recently made this 'hack' for gradient transform. even 'hacking' that was easier than maintaining and understanding complex canvas JS - at least to me. https://4degreesdigital.com https://4degreesdigital.com
  • ROARosen 6y ago
    Love it! I'm just wondering, aside from the animation part do you ever need to edit an Illustrator-generated svg?
    • nikkwong 6y ago
      I do personally for color control. You can see my heavy use of SVGs here at a site I'm in the middle of implementing [0]. For example, if you look in the :root {} you will see a lot of CSS variables that are declared and which manipulate their HSL value based on base variables like --hue. The SVGs implement these. So you can change the global --hue, and the hue of all the SVG elements on the page will change. I've modified output SVGs from figma/illustrator to reference a variable rather than a hardcoded fill i.e. <path fill="red"> becomes <path fill="var(--base)"> That's a simple example, you can go further to change relative saturation and lightness as well, which I also do with CSS calc(). It's fun! [0] www.holysnacks.us
      • dillondoyle 6y ago
        i like the sun rays!! I do love the mix of css vars into SVG. it makes a lot of sense to me too.
      • ROARosen 6y ago
        Wow I never thought of doing animations that way. Great stuff!
• simias 6y ago
  I disagree, I routinely manually mess with SVG (even SVG generated with a program like inkscape) because it lets me add interactivity and animations. That's the killer feature for me: you can draw arbitrary vector shapes in a website, then hook into them using javascript the way you would any DOM element. There are a few subtleties to make it work well, but it's pretty straightforward. Here's an example: https://svkt.org/~simias/up/20210212-185105_svg.png https://svkt.org/~simias/up/20210212-185105_svg.png All the elements and paths are SVG generated from some javascript. You can interact with the various elements, move them around and the paths are updated in real time. Of course you could do the same thing with a raster format by using a canvas and drawing a bitmap for instance, but SVG works at a higher level and lets you do these things a lot faster and probably with better performance. You can use CSS-styling, you can register javascript event callbacks etc... Or to put it another way: if SVG was meant as an opaque machine-to-machine format, why even bother with the insane overhead of XML instead of using some dense binary format?
  • runarberg 6y ago
    Getting your hands dirty by manually messing with SVG elements allows you so much freedom while plotting in D3, it is amazing. If you do any sort of advanced data visualization on the web, being able to read and write parts of SVGs is essential.
  • follower 6y ago
    Along those lines, I recently encountered this project that enables the use of SVG to design maps etc for games developed with the Rust language game engine Bevy: https://github.com/carrascomj/bevy_svg_map https://github.com/carrascomj/bevy_svg_map "The properties of the lines (color, opacity, fill...) can be used to programmatically add functionality..."
• wtetzner 6y ago
  > SVGs are meant to be created and used like any image file. Then why bother with the XML? And why use the embedded DSLs in strings instead of the more verbose XML-way.
• JNRowe 6y ago
  > You don't edit raw png values either However, for when you want that there is SNG¹. It can be a surprisingly fun way to perform minor corrections or filters to an image. ¹ http://sng.sourceforge.net/ http://sng.sourceforge.net/