SVG image shrink

572
2
Jump to solution
02-10-2021 01:41 AM
CedricVidonne
New Contributor II

When loading SVG images, either exported from Illustrator or R, they all shrink a create a margin/padding around it that make them way smaller than the original size. This could be ok when loading some charts in the content of the storymap itself, although not practical, it becomes a real issue with the logo in the banner that becomes super tiny. Are there any specific parameters to include when saving the SVG?

Here the SVG (top one) vs PNG example of the same logo:

svg.png

png.png

  

0 Kudos
1 Solution

Accepted Solutions
OwenGeo
Esri Frequent Contributor

@CedricVidonne  -- I'm not an expert in this, but I asked some colleagues...hope this helps!

After much trial and error, it seems that white space is only retained when the "responsive" check-box is ticked during Illustrator's SVG export.

There is no actual white space there, it really just depends on the application reading the SVG, in this case, Apple's Finder preview and AGSM. Unchecking the responsive box gives the result Cedric is trying to achieve when uploading. I haven't run into any responsive issues after testing this and viewing on multiple screens, so it should be an effective solution. Would love to see if there's any other alternatives.

Owen Evans
Lead Product Engineer | StoryMaps

View solution in original post

0 Kudos
2 Replies
OwenGeo
Esri Frequent Contributor

@CedricVidonne  -- I'm not an expert in this, but I asked some colleagues...hope this helps!

After much trial and error, it seems that white space is only retained when the "responsive" check-box is ticked during Illustrator's SVG export.

There is no actual white space there, it really just depends on the application reading the SVG, in this case, Apple's Finder preview and AGSM. Unchecking the responsive box gives the result Cedric is trying to achieve when uploading. I haven't run into any responsive issues after testing this and viewing on multiple screens, so it should be an effective solution. Would love to see if there's any other alternatives.

Owen Evans
Lead Product Engineer | StoryMaps
0 Kudos
CedricVidonne
New Contributor II

Thanks, it works for Illustrator. I think I found a workaround for R SVG too simply by adding the width and height in the SVG tag because there is no responsive option for R SVG export.

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2075" height="750" viewBox="0 0 2075 750">