Adobe

decor

Web Platform Team Blog

Making the web awesome

SVG: How would you make it better?

Our team is starting to look at SVG on the web and in our tools and at ways it can be better. We would love to hear your input and where you’ve hit problems using SVG. Whether it’s inconsistent behavior across browsers or challenges in Adobe tools when working with SVG – we want to hear it all!

Your feedback in the comments here would be greatly appreciated or send us a tweet @adobeweb with the hashtag #BetterSVG.

18 Comments

  1. November 03, 2014 at 2:03 pm, Nick said:

    I’m so glad the Adobe Web Platform team is looking into improving the state of SVG tooling and use.

    My greatest want at the moment is customization of the exported SVG from whatever app I happen to build it in, i.e. being able to define paths, masks, or patterns rather than just the shape. Using a tool like Illustrator makes it easier to create complex paths and shapes, but if I want to use it as a mask, it requires a bit of manual work that could be solved in the export process from AI.

    Thanks for all hard work and open discussion.

  2. November 03, 2014 at 2:46 pm, Evan said:

    Illustrator exports paths with the even-odd fill rule correctly (it generates fill-rule=”evenodd”) but it ignores this attribute on import and uses the non-zero winding rule for all paths instead. This causes simple SVG files to unexpectedly change appearance after editing and makes compatibility with other SVG tools difficult.

  3. November 03, 2014 at 2:54 pm, Marek Raida said:

    I love SVG and experiment with it a lot and my momentary notices are:
    – MSIE not supporting SMIL nor CSS Transforms/Animations for SVG is very bad thing
    – Chromium’s (Blink’s) lack of unit tests breaks their implementation way too often, sometimes (in some versions) feture some works, sometimes it does not
    – HW acceleration is a must today, some browsers (like Chrome) do not offer it for SVG
    – different names for the same stuff between CSS and SVG are confusing for newbies, some alignment would be welcome
    – z-index and multiline text is something coming to SVG2 (I believe) and developers miss it sorely these days already
    – “sprite” (path/shape) collision detection is something in the spec. long time present, but was never widely implemented, what is a shame
    – most probably much more, but this is what I’ve on my mind right now

    • November 04, 2014 at 4:15 am, Anthony Hastings said:

      I agree entirely with your response here. Hardware acceleration is a must. Everytime I try to animate or transform an SVG it’s causing repaints.

      Browser consistency is the key; things like Firefox transform origin not supporting percentages correctly (https://bugzilla.mozilla.org/show_bug.cgi?id=923193) are real blockers for doing any kind of animation work in a responsive environment.

  4. November 03, 2014 at 3:05 pm, James Deering said:

    As part of the W3C, I would like it if you could convince the group to support the CSS div tag in SVG. This would allow for moving forward and using SVG as an advanced markup language, negating the need to use legacy HTML (A 20 year old markup language).

    By incorporating the viewBox into the CSS div, a relative div could have a viewBox attribute. All subsquent div’s would be positioned in relation to the viewBox thus allowing for pixel perfect layouts on any screen aspect ratio device.

    • November 04, 2014 at 1:37 pm, Corin said:

      I’m not sure if this the perfect solution, but something needs to be done to make viewbox behave more intuitively.

  5. November 03, 2014 at 11:37 pm, Laurence Baker said:

    I’m glad you’ve started this debate. Other than some individual bloggers, there seems to be very little from the big players about SVG.

    There’s a short video from an Adobe Evangelist, which basically says: “tick responsive” if you need it. This aside, there seems to be little appetite from Adobe in pushing SVG forward – until now.

  6. November 04, 2014 at 12:52 am, seba said:

    I found some bugs in Illustrator svg export, where should I report these?

    Also, I think better tools for SVG animation are needed. Would be great if Flash could export SVG animated with snap.js code.

  7. November 04, 2014 at 1:12 am, Guillaume said:

    It would be great to include a Export for the web SVG high compression option directly in Adobe softwares. The current SVG export (even with maximum compression options enabled) still produces quite heavy files.
    I need to use to compress my files after Adobe export. Which is a great piece of software by the way!

  8. November 04, 2014 at 8:34 am, Andrew Berg said:

    Control over the stroke location, inside, outside, or center.

  9. November 04, 2014 at 8:56 am, Micha Grandel said:

    I try to use SVG a lot on my websites, but every time I run into the same problems, so this would be my wishlist:

    * Provide a browser-independent way to implement layer blend modes (like multiply) 🙂 for now, these are ignored in the export of illustrator! You can just include them and provide some polyfills for browsers, which doesn’t support them (either directly in the SVG File or when including it in Edge Code or Dreamweaver)

    * provide a browser-independent way to build svg sprites. I want to be able to create one icon per layer (possibly with one background layer for all icons) and then save one svg file out of illustrator and just use whatever icon(layer) I want in my html-file. The method is described in detail at http://is.gd/SLhIO1 – I don’t care, if Illustrator is using group- or symbol-elements in the svg File, but it would be nice if the svg file is ready to go without the need of handcoding

    * Would be really great if you provide an easy to use, fast way for polyfills arround svg, so that I don’t have to switch to google just to look how to make this or that work in browser A or B (e.g. masks etc.) It’s annoying to have to search for many minutes just to find out, that google chrome doesn’t support the “”-Element (used in the sprite-workflow) or that CSS is ignored when using the -Element. Provide simple to use workflows for such problems and help me save time 😉

    * Please support (and use!) CSS3 transformations and other CSS3 stuff in illustrator! E.g. it’s not possible to skew a rect without getting a polygon… just a small enhancement 🙂

    * make all the svg-minifier useless by enhancing your SVG Export in Illustrator.

  10. November 04, 2014 at 9:18 am, Jonathan Engstrom said:

    The biggest stumbling block within my SVG workflow is artboard sizing. I create my artwork in Illustrator, save and SVG and then save a PNG fallback. This is great, however if I am working on a machine where I don’t have access to the original .ai file, and want to make a quick edit to a SVG file, the artboard size is lost, which is OK for the SVG itself as it is scalable, but when I go to re-export the PNG fallback, then the sizes are wrong.

    Only a small inconvenience, but it would help streamline things.

  11. November 04, 2014 at 5:31 pm, Noah Blon said:

    Thanks for having this discussion — here are a few things I would love to see!

    * Removal of camelCased attributes such as viewBox and preserveAspectRatio. These attributes can be difficult to manipulate with JS.
    * Breaking up multiple value attributes, such as viewbox, into components which can be targeted individually.
    * The ability to set strokes inside or outside a shape.
    * Fragment identifiers working in CSS background images.

    Export from Illustrator
    * Ability to completely customize output of attributes on SVG tag and save configurations.
    * Consolidation of all into one block at the top of the file. Generally more control over how defs are output and applied.
    * Configure IDs and Classes for groups/shapes in some sane way with the file.
    * Title, desc, and aria roles configuration for accessibility.

  12. November 05, 2014 at 9:56 am, Tobi Reif said:

    If you could dedicate resources towards closing all tickets / fixing all reported SVG bugs in the main browsers on all platforms (and also make them all pass the main SVG test suites) – that would be pretty great 🙂

    https://code.google.com/p/chromium/issues/list?q=svg
    https://bugzilla.mozilla.org/buglist.cgi?quicksearch=svg
    etc

  13. November 05, 2014 at 1:28 pm, Elliot Geno said:

    My biggest headaches with SVG involves animations. Greensock recently introduced some updates that smooths a lot of the issues with transforms across browsers. You should definitely hook up with Jack Doyle from Greensock to see what he is doing. There should be a GUI for animating with his tween engine!

    Otherwise… Filters are a HUGE PAIN. They should not be that difficult to add SVG filter effects in Illustrator. Look to how Flash applies filters. IT’S A STROKE OF GENIUS. Nothing out there compares to it’s expressiveness, layering, performance and simplicity.

    Also, take a look at animating filters. There really, really, needs to be some performance enhancements with animating SVG filters. They are almost unusable. Flash is handling these fine, I wonder why SVG is taking so long to catch up.

  14. November 05, 2014 at 5:28 pm, George G said:

    Two things from me:

    – easier export options (resorting to Save As every time is a hassle, and lacks control options)
    – better controls over exported fonts (right now, a Roboto Black element will export with font=”Roboto Black”, instead of font=”Roboto” and style=”font-weight: 700″, which breaks the font in Firefox)

  15. November 09, 2014 at 6:22 am, Witkacy said:

    Hi,
    Thank you for asking!

    My biggest concern is a quality of SVG output form Illustrator.

    – the pixel preview, although better than in previous versions, still doesn’t match browsers one to one even where it easily could
    – I would love to see an option to minify/optimise output, so I would not have to resort to great but flawed tools like SVGO
    – currently when I want to embed raster graphics in an SVG, my options are very limited – either a very compressed JPG over which I have no control, or a PNG24 which is huge. Current workaround is lengthy: I save SVG with the PNG linked, then run them manually through ImageAlpha/ImageOptim, then relink them by hand in Illustrator and finally save the SVG with them embedded. It would be great if I could control the compression/format of raster files much more granularly.
    – in general an overhaul of Save for Web with an addition of SVG (super optimised) and better GIF (giflossy) and PNG (pngquant)would be great – Photoshop’s Extract Assets is a first step (although the control over pngquant’s compression is non-existant 🙁 ).

    Thank you for great tools and your open attitude!

    Regards
    m.

  16. November 13, 2014 at 11:33 am, Rob Levin said:

    An in depth and thorough article explaining the details of the advanced SVG export options would be extremely useful. Especially for the “CSS Properties” dropdowns (Style Elements, Style Attributes, Presentational Attributes, etc.). Hovering does give some explanation, and I can always look at the output, but a guide of sort would be ideal.