I'm used to making sprites – but read that SVG is the way to go. I'm creating a mockup for client and would like to show the custom icons made in Photoshop and now need to bring them back into illustrator for SVG conversion.

I imagine there's a better workflow and I'm searching for some tips and techniques.

  • you use Phothoshop CC? if then, this may work for you
    – OscarMosh
    Commented May 26, 2014 at 22:11
  • What do you mean? Raster -> SVG ?!?! You say "made in Ps" then "bring them back into Ai" as if they were made in Ai. What are you doing exactly?
    – Komental
    Commented May 27, 2014 at 1:52
  • @Charles, can you please let me know are your icons done as shapes?
    – Vnovak
    Commented May 27, 2014 at 6:48
  • @Komental I've created some custom icons in AI, although mixing some standard twitter, Facebook fonts in PS. They are all smart objects so they keep their vector dimensions.
    – Charles
    Commented May 27, 2014 at 13:47

2 Answers 2


SVG isn't the way to go. Sprites are vastly better, still. SVG is buggy, heavy, behaves oddly sometimes/often and is generally a bit of a failed initiative.

At this point there's not really a vector based equivalent (and certainly not an improvement) available to sprite blitting for speed, accuracy and correct responses. Weird, I know.

Uniquely, on iOS/Mac there is Core Graphics, but it's an order of magnitude (or more) slower than sprites, and has the same memory issues, plus a drawing overhead due to the use of a memory space called contexts in which they're first drawn, then blit to the screen. And if you want to scale you need to redraw, then blit, again.

Core Animation is much faster (avoids the context phase, drawing direct to screen) but you don't have near as much control over anti-aliasing, nor the full range of drawing tools and effects and post processing available in Core Graphics. And, ultimately, it prefers to blit sprites, also.

  • This information is helpful. The SVG verse icon font debate appears to be weighed towards the SVG implementation.Currently, so the best way is to continue making icons in a variety of different pixel dimensions (32, 48, 96). In terms of retina display clarity, you recommend any pertinent resources to ensure crisp graphics using the traditional transparent PNG sprite sheet?
    – Charles
    Commented May 27, 2014 at 13:42
  • SVG does still have some quirks, but it's getting better! Here is a nice demo you can use to test the performance of SVGs vs PNG sprites on your targeted browsers: codepen.io/adrianosmond/pen/LCogn
    – JohnB
    Commented May 27, 2014 at 18:08
  • @johnB good resource.
    – Charles
    Commented May 28, 2014 at 0:45
  • The debate (if there even is one) about SVG versus bitmap icons will be obliterated, instantly, if you use a vector illustration app and export all required icons at their correct resolution and package accordingly, in PNG with alpha. Not only does this radically improve performance on just about all platforms known to man, it ensures you have absolutely exact exports of your artwork. Here's something fun, to research... SVG renderers are not all equal. PNG, by virtue of how it's presented, always is.
    – Confused
    Commented May 28, 2014 at 11:51
  • @Confused absolutely valid when it comes to icons. I think the most important thing to note is that vector is not great for small images. Vector is great for scaling up, but if you're working with ~32px² or smaller then you should be hand tuning the individual pixels of your artwork.
    – JohnB
    Commented May 28, 2014 at 17:12

This probably doesn't help you now, but if you're making icons for web use it's always best to actually start them in Illustrator. From there you can save them as SVG pretty easily as I'm sure you know. The reason is that Photoshop doesn't provide the scalability in its tools that Illustrator does.

As an aside there's nothing wrong with using SVGs for web. Their support goes back to IE9 and you can provide PNG fallbacks for earlier browsers. Web fonts are an alternative, but aside from browser compatability are actually more prone to bugs and errors in various browsers.

Not the answer you're looking for? Browse other questions tagged or ask your own question.