SVG for symbols? Drawbacks?

[TobiasBrühlmeier1]

Hi all,

I'm developing a web app based on ArcGIS for Javascript. My customer's problem requires using many different point symbols, some of them graphically quite complex. I use PictureMarkerSymbols to create my symbols.

First I've used PNG's for my PictureMarkerSymbols. I'm not quite happy with the drawing quality, they look kind of pixelated.

Now I'm thinking about changing to SVG. My first tests showed much clearer symbols. But drawback seems to be that export to PDF and PNG doesn't work anymore. Also, it seems to me that it takes more time to build the map, and I'm getting timeout errors now and then.

Is anyone experienced with SVG's for PictureMarkerSymbols and knows about the drawbacks?

Regards, Tobias

[JeffJacobson]

In your tests, are you using an SVG path with SimpleMarkerSymbol.setPath or pointing to a separate SVG file's URL?

[TobiasBrühlmeier1]

pointing to a separate SVG file’s URL...

[JeffJacobson]

I haven't actually used SVGs as symbols in ArcGIS API for JavaScript, but it might be worth a try to see if using the SimpleMarkerSymbol.setPath method is compatible with exporting the map to PNG or PDF. (Note that you can only do this if your SVG symbols are made up of a single path, which may or may not be the case for your SVGs.)

[TobiasBrühlmeier1]

Ok, that's really helpful. Your hint about single path symbols is very important, thanks. My symbols are more complex.

Do you know where I can find documentation about it? Google couldn't help me yet.

[JeffJacobson]

I use Inkscape when I create or edit SVG files.

As a first step I would use Inkscape to draw something very simple that would only use a single path element. E.g. here's a star shape you could use:

m 9.8301273,1037.5321 0.9174987,4.6051 4.313751,1.8549 -4.096229,2.2957 -0.431104,4.6758 -3.4491075,-3.1864 -4.5801885,1.0349 1.9645634,-4.2649 -2.3996077,-4.0362 4.6632743,0.5505 z

If you can get that to work with ArcGIS Server (i.e., the symbols aren't omitted when printing to PDF or PNG), then you can use Inkscape to create modified copies of your own symbols that only use a single path element.

[TobiasBrühlmeier1]

Thanks Jeff,

Doesn't work im this case, I'm forced to go back to PNG. But anyway, could help next time...

[BrianO_keefe]

I've just gotten access to Adobe CC and I'm ready to start developing some nice Illustrator icons, does this mean that in order to create a usable SVG I have to maintain a single path?

[JeffJacobson]

The single path restriction is only if you are going to be using the SVG to create a SimpleMarkerSymbol via the  SimpleMarkerSymbol.setPath function. (This would allow you style the symbol with a renderer based on features' attribute values.)

If you plan on just using an SVG file as an image (i.e., a PictureMarkerSymbol), you shouldn't need to worry about that. It should work just like a PNG or GIF.

[TobiasBrühlmeier1]

I’ve used SVG files as images; worked quite well, but I couldn’t make exporting work… Had to change back to PNG now.