SVG Export Size

[jonwright]

I've created a logo for my website which is 250px x 250px.

I export it to SVG and it opens at the correct size in other applications, such as Sketch, but when I upload it to my CMS (Webflow) it is only 150px x 150px.

I've tried fiddling with the settings but can't seem to change it.

Is there something obvious I'm missing on export?

[Gabe]

Hi @jonwright,

Welcome to the forums. 

Make sure your document DPI matches your Export DPI. 

Thanks,

Gabe. 

[jonwright]

Hey @GabrielM, thanks!

My document and export DPI are both set to 72, but it doesn't seem to make a difference.

[Gabe]

It looks like it's a web flow issue. See below:

https://forum.webflow.com/t/svgs-not-appearing-correctly/40021

[jonwright]

Hmm, I'm not so sure.

My SVG's are displaying in Webflow, just at a reduced size.

To double check, I opened the the Affinity Designer SVG in Sketch, then exported it again as an SVG from Sketch.

The SVG exported from Sketch was then the correct size in Webflow.

[Gabe]

Can you attach the file so we can have a look? .AFDESIGN and both SVG's

[jonwright]

Sure, before I do, I've just spotted this difference in the SVG files produced, the following line appears in the AD version:

<g transform="matrix(1,0,0,1,-100,-100)">

'-100' is the exact amount the SVG images are being reduced by in Webflow. Could this be the reason?

[jonwright]

Here are some test files, with a simple square.

SVG Test.afdesign

Sketch.svg

AD.svg

[Gabe]

Can you please do another test with 144dpi, in both document setup and export?

[jonwright]

Sure, here we go:

SVG Test 144dpi.svg

SVG Test.afdesign

[Gabe]

I mean, do you get the same "downscale" with the 144dpi?

[jonwright]

Oh, sorry, yes I do, it still shows at 150px x 150px when uploaded.

[Gabe]

Your SVG has that extra line 

<g transform="matrix(1,0,0,1,-100,-100)">

While mine hasn't got it.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 1280 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
    <rect x="100" y="100" width="300" height="300" style="fill:rgb(163,126,0);"/>
</svg>

Try to upload this version and check. Also, how do you export it? What preset? 

Mac or windows??

SVG Test(5).svg

[jonwright]

When I'm exporting, I select 'Selection Without Background' or I'll get the whole artboard, which is included in the file you just sent.

When uploaded, it seems to have included the artboard, but still made the image small - 250px x 150px.

I'm on Mac OS 10.13.5.

 

[jonwright]

I think I figured it out. AD always outputs the size as 100% x 100% no matter what the dimensions.

I change the XML to the pixel values and all worked correctly on upload.