Image width and height when exporting SVG

[Kirsten]

Hi,

I'm fairly new to AD, so there might an easy answer to my question that I have missed, but I am having some issues with my svg images exporting in the size I have them in the AD project.

 

In other apps I've had no trouble with this so I compared the output between them to find that the width and height is set to 100% for the AD svg images, whereas a similar image in Inkscape for example, has the width and height set to a given size in mm. In Sketch the height/width settings are similarly set to the image size in pixels.

 

Here are the size settings for my AD svg image:

 

 

 

Here are the size settings for my Inkscape and Sketch exports of a similar circle svg image:

 

 

 

 

By changing the width and height settings for the Affinity Designer image directly, I was able to get the image to show up in the correct size in my browser, but I'm hoping to find a place to perform that change upon export from Affinity Designer. (Since AD is my preferred program for creating svg.  :)  )

 

Also, is there any advantage to the 100% width and height settings that I am not aware of?

 

I've attached the corresponding svg image files in case they are of interest.

Circle_Size_Tests.zip

[v_kyr]

Hi,

 

in the image shown above for AD, since the SVG viewbox already defines the size (0 0 50 50) in it's default as pixels, the 100% is just another way here to express the overall SVG width/height in percentages instead of pixels or mm. - See also ...

• Mögliche Maßangaben in SVG sind
• in English instead

... and for the viewBox Attribute ...

• in German
• in English

[Dave Harris]

Try going to File > Export > SVG > More and unchecking the option to set the viewBox.

[Kirsten]

Thanks for the quick response. :)

 

Try going to File > Export > SVG > More and unchecking the option to set the viewBox.

Thanks!

That fixed the problem and removed the viewbox entirely. My image is now exporting at the proper size.

 

 

Hi,

 

in the image shown above for AD, since the SVG viewbox already defines the size (0 0 50 50) in it's default as pixels, the 100% is just another way here to express the overall SVG width/height in percentages instead of pixels or mm. -

 

I would have thought the same, but when I opened the image in my browser (Firefox) with the viewbox set to 100% the image filled the entire screen, instead of appearing at the 50px size. I'm not sure why that happens.

Is there perhaps a setting to adjust the viewbox to match the size of the image, similar to Sketch and Inkscape?

[v_kyr]

 

....

 

I would have thought the same, but when I opened the image in my browser (Firefox) with the viewbox set to 100% the image filled the entire screen, instead of appearing at the 50px size. I'm not sure why that happens.

Is there perhaps a setting to adjust the viewbox to match the size of the image, similar to Sketch and Inkscape?

 

 

 

 

It seems the SVG width/height percentage values don't apply to the inner containing blocks (the viewbox coordinates define) and instead then to the outer viewport of the browsers here. - See SVG sizing here and probably the other shown slices there related to that theme.

 

Here is a german source which shows this also (...SVG-Grafiken ganz einfach mit prozentualen Breitenangaben an die Größe des Elterncontainers anpassen), that the size placement in the parent container is affected by using these percentage values.