extra padding at top and bottom of .svg files.

[jbloemker]

Folks:

I have converted Illustrator files to SVG files with reasonable success. However, when I import them into a Flare topic, there is extra padding at the top and bottom of the image. The Flare stylesheet editor does not permit negative values for the padding_top or padding_bottom selectors. I did edit the stylesheet directly, and I was able to enter negative values for these selectors. I worked in the XML editor, but when I viewed it in the Preview window, the extra padding was still there. Also, the amount of extra padding from one image to the next is inconsistent, so creating a tag to mitigate this problem is not feasible, as it cannot be universally applied. Can anyone give me some advice? (Or tell me what I might be doing wrong?)

Jonathan Bloemker
Compunetix, Inc.

[JamesMcL]

Hi Jonathan,

We've had similar issues. Flare is ignoring Illustrator's bounding box and making the SVGs square by adding whitespace.

I believe the fix you need is to add a "width" and "height" value to your SVGs. If you open one of your images in Notepad and look at the first few lines, you probably have an entry for viewBox=... Use the values from viewBox to add height and width like this:

Code: Select all

xmlns:xlink="http://www.w3.org/1999/xlink" width="793px" height="600px" x="0px" y="0px" viewBox="0 0 793 600"

That should get rid of the white space. To avoid this in future, when you save as SVG in Illustrator, unselect the "Responsive" checkbox at the bottom of the SVG Options dialog.

Best wishes,
James