1

I am working closely together with a developer to create websites. We've stumbled upon a problem when it comes to exporting SVGs from Adobe Illustrator (CC) and implementing them on websites.

The artboard in illustrator looks like follows:

enter image description here

Yet, when added to the web code, there is a gap we cannot get rid of:

enter image description here

SVG export settings age:

  • styling: presentation attributes
  • font: svg
  • object ids: layer names
  • decimal: 0

Additional option: responsive

Has anybody experienced anything similar?

Thanks in advance for your help :)

Improve this question
10
  • Any shading / drop shadow on the shape?
    – lmlmlm
    Commented Feb 25, 2017 at 18:37
  • 1
    You you sure the spacing is coming from the shape itself? not another element? or margin or padding or something? It could be rendering error if your SVG is not precise to the same, especially if it originally differs in dimensions. We need more detail (or the SVG itself)
    – Zach Saucier
    Commented Feb 25, 2017 at 19:17
  • 1
    There are no pixels in a SVG. Simply there are no guarantees that the anti aliasing and filling will work exactly the same on any other renderer. Since everything is done on each browser differently you either have to debug each SVG on every browser or be less control focused. Anyway im sure this case can be fixed with css.
    – joojaa
    Commented Feb 25, 2017 at 21:42
  • Thanks for your comment @Lucien! No shading, no drop shadow. Just a plain shape :)
    – Nico Strobl
    Commented Feb 27, 2017 at 15:02
  • Thanks for your comment @Zach Saucier: No, I am not :) I'll have my developer double-check today. Dimensions and aspect ratios are the same. What do you mean by "if your SVG is not precise to the same"? You mean Illustrator export settings should match the attributes within the code?
    – Nico Strobl
    Commented Feb 27, 2017 at 15:02

2 Answers 2

Reset to default
1

It looks to me like the svg is a different aspect ratio from the area it is intended to fit in.

For a shape as simple as a triangle in a box, I think the best solution is for your developer to use borders on a ::before element to simulate a triangle shape. If the ::before element is positioned to the center top of the box, then the aspect ratio of the box won't matter.

If you and the developer would rather use the svg, I would recommend trimming the artboard to the size of the svg, that way you don't have to worry about aspect ratios, the developer just has to set the svg to height:100% and center it.

Improve this answer
2
  • Thanks for your answer! We made sure the dimensions and aspect ratio are the same, but I'll check back with him and we'll look into this. Excellent tip concerning trimming the SVG. This will be option number 2 for us to try. I'll report back to update you on the results.
    – Nico Strobl
    Commented Feb 27, 2017 at 14:53
  • Setting the SVG to height: 100% would just make the SVG scale to the parent's height, not to the size of the artboard on which it's made
    – Zach Saucier
    Commented Feb 27, 2017 at 15:30
0

Have you tried the asset export feature in the newest version of Illustrator? It takes out a lot of guess work for getting SVG assets out of Illustrator. It should not accidentaly crop out part of your art as long as you select it all and drag it into the asset export like shown below. I've had good luck with it recently.

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.