adding more export options for SVG

[lastfuture]

Hi,

 

I'd like to propose additional export options for exporting SVG from Affinity Designer that would be very helpful for inline web-use.

 

Right now, when I have a shape that is part of a dashboard and I export SVG for web this is the result:

<?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 231 272" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
    <rect id="Artboard1" x="0" y="0" width="231" height="272" style="fill:none;"/>
    <clipPath id="_clip1">
        <rect x="0" y="0" width="231" height="272"/>
    </clipPath>
    <g clip-path="url(#_clip1)">
        <path d="M31,48l-75,84l192,140l83,-116l-50,-156l-74,109l-76,-61Z"/>
    </g>
</svg>

this is great for loading SVG into a website as img src attribute or using CSS, however more often than not I find myself needing to use SVG inline, i.e. directly in my html

 

In that case an output that would help me much more would be:

<svg width="231" height="272" viewBox="0 0 231 272" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
    <path d="M31,48l-75,84l192,140l83,-116l-50,-156l-74,109l-76,-61Z"/>
</svg>

Instead of having to edit my SVGs by hand, I'd love if I could achieve the above export by setting the following options, that do not yet exist:

 

[_] export artboard as clipping path

[_] include XML declaration and doctype

[x] set absolute width and height

 

(the default would then be the inverse of my selections)

 

 

Please consider adding these in the advanced SVG export settings

Cheers

-- Alina

[MEB]

Hi Alina, 

Regarding the third, when exporting to SVG, click the More button and uncheck Set viewbox, or am i missing something here?

[VIPStephan]

No, viewBox and width and height are two different things. The viewBox sets the corrdinate system and basically the “viewport” (the visible area of the graphic) while the SVG element itself can have a different width and height.

I also find myself always opening the SVGs in code editor and adding an absolute width and height because the 100% values can cause issues with default sizing of SVGs (embedded via <object>) in Internet Explorer. It’s usually the best to have absolute values in the width and height attributes.

[lastfuture]

actually unchecking Set Viewbox may help in my case, thanks. It sets the width and height and in turn removes the viewbox attribute.