Mobile app version of vmapp.org
Login or Join
Moriarity648

: Specific svg file size I want to export my logo from affinity to .svg in specific size, but affinity always sets size for 100% width and 100% height. Where can i change it?

@Moriarity648

Posted in: #AffinityDesigner #Svg

I want to export my logo from affinity to .svg in specific size, but affinity always sets size for 100% width and 100% height. Where can i change it?

10.03% popularity Vote Up Vote Down


Login to follow query

More posts by @Moriarity648

3 Comments

Sorted by latest first Latest Oldest Best

 

@Tiffany317

There is an option to control the viewBox called Set viewBox in the Export Options palette (when you are working with the Export Persona)

According to this post in the official forum it toggles between this 2 behaviors:


<svg width="100%" height="100%" viewBox="0 0 40 40" […]
<svg width=40px height=40px […]


I attached a screenshot of the Export Options palette:

10% popularity Vote Up Vote Down


 

@Harper654

You can change the native size of an SVG by opening it in an XML-capable text editor (a text editor that can do UTF-8 with UNIX line endings, typically an HTML editor will edit XML just fine.)

The width and height are attributes of the svg tag:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="128" height="128" viewBox="0, 0, 128, 128">


You will also want to set the viewBox attribute (if it is there,) which is 4 comma-separated numbers that describe top, left, x, and y. Typically, you will want top and left to be 0, and x to be the same as the width, and y to be the same as the height.

You can also set the displayed size of an svg with CSS when it is placed in a website:



So you may want to leave your SVG at a native size of 100% width and height and just modify its size with CSS in whatever contexts that you use it.

10% popularity Vote Up Vote Down


 

@Megan533

Where are you rendering this SVG? I assume it's in a web browser?

If that's the case, browsers will automatically scale SVGs to the maximum size that it can show.

But, if you were using the SVG in a website, you would just set the image size in the HTML:

<img src="your-svg.svg" width="300px" alt="Logo" />


It will figure the height out itself.

It would be good if you could link the SVG here too so we can see how it's constructed. Affinity Designer is supposed to be quite good, but it hasn't got a large base of users at the moment.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme