topic Re: SVG for symbols? Drawbacks? in ArcGIS JavaScript Maps SDK Questions

SVG for symbols? Drawbacks?

TobiasBrühlmeier1 — Tue, 10 Nov 2015 07:23:23 GMT

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

Re: SVG for symbols? Drawbacks?

JeffJacobson — Tue, 10 Nov 2015 18:32:58 GMT

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

Re: SVG for symbols? Drawbacks?

TobiasBrühlmeier1 — Tue, 10 Nov 2015 18:49:40 GMT

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

Re: SVG for symbols? Drawbacks?

JeffJacobson — Tue, 10 Nov 2015 21:04:27 GMT

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.)

Re: SVG for symbols? Drawbacks?

TobiasBrühlmeier1 — Wed, 11 Nov 2015 06:47:56 GMT

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.

Re: SVG for symbols? Drawbacks?

JeffJacobson — Fri, 13 Nov 2015 17:03:30 GMT

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.

Re: SVG for symbols? Drawbacks?

TobiasBrühlmeier1 — Sun, 15 Nov 2015 07:17:20 GMT

Thanks Jeff,

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

Re: SVG for symbols? Drawbacks?

BrianO_keefe — Mon, 16 Nov 2015 17:29:11 GMT

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?

Re: SVG for symbols? Drawbacks?

JeffJacobson — Mon, 16 Nov 2015 18:18:59 GMT

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.

Re: SVG for symbols? Drawbacks?

TobiasBrühlmeier1 — Tue, 17 Nov 2015 06:37:24 GMT

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