Working with SVG Format

[therelief]

First, I should mention I'm more of a novice/casual user of Xara Photo & Graphic Designer (v.15), not a pro.

I have a guy putting together a simple website for me. He told me he'd like to have the logo and icon graphics I supplied him with in SVG format if possible. I'd never worked with SVG before and thought it may be a simple matter of exporting the graphics in that format. When I went to do that, an export settings box came up. I wasn't sure what those should be so just stuck with the default (see attached screenshot). However, when I sent the resulting graphics to him, he said he couldn't get any of them to work. He said, from what he could tell, it saved the images as bitmaps inside SVGs instead of actual vectors.

Can anyone shed some light on this for me? I tried to search for SVG, but nothing came up. What should the export settings be set at? Is there something else I should be doing to export the icons/graphics into SVG format?

[gwpriester]

Why not supply your graphics as PDF which is a more universal file format that supports both vector and bitmap.

If you are using specific fonts, convert them to editable shapes.

[therelief]

He wants them in SVG so that's what I want to know how to do properly, if anyone can help with that.

[mwenz]

Xara products do not support SVG constructs such as shadows or embedded images or what would be bitmap effects, such as the mentioned drop shadows. Those bitmap effects are exported into a separate folder.

Only a few export or import filters have ever had much love. SVG export is one that hasn't been updated as long as I can remember.

I have no idea what the logo looks like. But if the developer needs vector, and you need to use an Xara product, remove any effect that will become a bitmap and send just the vector. In the case of a drop shadow they ought to be able to use CSS to add it.

Else export without effects and add them in InkScape. Then you might be able to supply the developer what they need...but without seeing the logo that's a guess.

[therelief]

For what it's worth, the logo and icon graphics do not have any shadows. They are simple flat vectors. There aren't any effects on them. I have no clue what InkScape is. Can you provide more info?

[mwenz]

If there are no bitmap-type effects, it should be vector and no bitmaps. The clip-path settings only have to do with the bitmap effects and make no difference with vector work. I leave it on the Adobe choice.

The drawing below which I did a long time ago, was the first one I grabbed with gradient fills, a supported property in Xara's SVG export filter...and flat color works identically. It is shown in my browser and is pure vector.



I don't know why your export doesn't satisfy the developer. Without the file or the SVG, I couldn't say. I also don't know the type of site it's going into, the browsers used for testing, etc..

You can open an SVG in a plain text editor. If it is all text code without reference to a bitmap/folder, then it is vector.

InkScape's native file format is SVG and is the standard for producing SVG graphics. It's OpenSource and therefore free...they do like donations. All SVG graphics I supply get opened in it and any finishing touches done in it and exported. The above example is directly exported from XDP.

Mike

[gwpriester]

Can you post your logo here? Also, one of us could probably bring a PDF into Illustrator and export it as SVG.

[hseiken]

A big difference that I notice between SVG and Xara is blur. SVG now supports GPU blurring of shapes whereas Xara uses a 'feathering' option and these export to bmps.

Honestly, with this kind of thing, I would simply do your best not using anything but shapes and basic editing of points in order to get a solid SVG output. Anything else, and you risk triggering a bitmap export which will inevitably be tied to resolution dependency. SVG is so that you draw once and never have to touch the image again no matter what requirements the end display has.

In other words, if you have a drop shadow, then actually make a drop shadow out of a basic shape, don't use any shortcuts. If SVG losing quick do-fers ruins your ability to produce, then try Inkscape which is entirely based around the SVG format alone and has do-fers similar to Xara but uses legit SVG data formatting.