Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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.
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 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.
