5

I've got PSD file with vector logo (smart object). I need to save it as SVG for website use. I don't see such option directly in Photoshop though (I can only export it as .AI file).

  1. How does export process look like (PS CS5 or CS6 - current versions)?
  2. What are the best settings that web developer should use when exporting logo? You can set various sizes of SVG file in (AI -> SVG) converters like this one: http://image.online-convert.com/convert-to-svg
  3. Is there anything else to pay attention to in case of settings?
  4. How should SVG files be included on website in logo area? What is the best approach? Like this? http://jsfiddle.net/danielfilho/GdCcA/
Atadj
  • 7,050
  • 19
  • 69
  • 94
  • In response to question 4, it's most reliable to rasterise the SVG to whatever size you need, so the website has a PNG or GIF image to show and doesn't require SVG capabilities. – Niet the Dark Absol Oct 12 '12 at 18:37
  • @Kolink I'm using JPG logo right now but it looks blurred in website's responsive mode where you can't display it as 250px logo but rather 200px logo or 150px logo. Not to mention Retina where it looks ugly all the time. SVG would be perfect solution. Why it's not recommnded? The company I work for delivered me vector logo so having it in vector format on website would be great. – Atadj Oct 12 '12 at 18:40
  • SVG isn't supported in older browsers, for one. But if you can implement feature testing then you could have the SVG image fall back to a raster image instead. – Niet the Dark Absol Oct 12 '12 at 18:41
  • @Kolink Yes, I'm planning two versions but I think that all modern browsers and all modern devices will support it. – Atadj Oct 12 '12 at 18:42
  • I created a script that does this automatically. You just rename the layers you want to export in the PSD and it converts them to SVG. http://hackingui.com/design/export-photoshop-layer-to-svg/ – DMTintner Dec 16 '13 at 00:03

1 Answers1

3
  1. You can pay for it (SVG Kit), or the best alternative is to export/paste to Illustrator and then save as SVG. The question Photoshop Custom Shape to SVG path string details this.
  2. Look at the Illustrator site for details of the different options when saving as SVG. It depends on whether you are concerned with details such as target devices (mobile vs. desktop) and whether you want to display gradients, transparency and SVG filter effects.
  3. Best practices for creating web graphics by Adobe talks about using web-safe colors, Pixel Preview mode in Illustrator and addressing certain challenges of mobile devices.
  4. Agree with @Kolink's comments above.
Community
  • 1
  • 1
mccannf
  • 16,619
  • 3
  • 51
  • 63