SVG for symbols? Drawbacks?

5915
9
11-09-2015 11:23 PM
TobiasBrühlmeier1
New Contributor III

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

0 Kudos
9 Replies
JeffJacobson
Regular Contributor

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

0 Kudos
TobiasBrühlmeier1
New Contributor III

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

0 Kudos
JeffJacobson
Regular Contributor

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
New Contributor III

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.

0 Kudos
JeffJacobson
Regular Contributor

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
New Contributor III

Thanks Jeff,

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

0 Kudos
BrianO_keefe
Regular Contributor II

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?

0 Kudos
JeffJacobson
Regular Contributor

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
New Contributor III

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

0 Kudos