Jump to content
You must now use your email address to sign in [click for more info] ×

SVG Export - Differences - AD


Recommended Posts

I would like to know what is the difference between exporting an SVG in the different Designer options.

 

For example:
SVG (for the web)
SVG (to export)
SVG (coupled)

 

(I'm sorry if it's not well written, I have AD in Spanish.)

And what do you recommend, please? Thanks ^_^

Link to comment
Share on other sites

There are slightly differences how the SVG code is written/generated due to the choosen export option. You can easily see this if you open the respective SVG file inside an editor and look/compare the definitions for the exported files.

As an example, for a document type of web, WUXGA (1920 x 1200, 16:10) DPI 72 page, (I've just drawn a plain filled red ellipse and three red filled rects), the different export options produce for these the following output code:

SVG (web):

<?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 1920 1200" 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;">
	<ellipse cx="379.5" cy="271.5" rx="129.5" ry="118.5" style="fill:#e72c2c;"/>
	<rect x="883" y="509" width="321" height="259" style="fill:#e72c2c;"/>
	<rect x="864" y="243" width="270" height="96" style="fill:#e72c2c;"/>
	<rect x="600" y="465" width="170" height="183" style="fill:#e72c2c;"/>
</svg>

SVG (export):

<?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 1920 1200" 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;">
    <ellipse cx="379.5" cy="271.5" rx="129.5" ry="118.5" style="fill:rgb(231,44,44);"/>
    <rect x="883" y="509" width="321" height="259" style="fill:rgb(231,44,44);"/>
    <rect x="864" y="243" width="270" height="96" style="fill:rgb(231,44,44);"/>
    <rect x="600" y="465" width="170" height="183" style="fill:rgb(231,44,44);"/>
</svg>

As you can see there isn't much difference between the two SVG (web) and SVG (export) overall here, only the fill style color definitions differ in the way they have been written. The first writes them as hex defined colors, the second as rgb color values instead. Viewbox sizes and used shape form defs are identical.

Now let's look at SVG (print): ...

<?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 8000 5000" 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;">
	<ellipse cx="1581.25" cy="1131.25" rx="539.583" ry="493.75" style="fill:#e72c2c;"/>
	<rect x="3679.17" y="2120.83" width="1337.5" height="1079.17" style="fill:#e72c2c;"/>
	<rect x="3600" y="1012.5" width="1125" height="400" style="fill:#e72c2c;"/>
	<rect x="2500" y="1937.5" width="708.333" height="762.5" style="fill:#e72c2c;"/>
</svg>

As you can see here for SVG (print) the viewbox size and pixel coordinates of the used forms have been increased to a factor of 4,16666666666667.

And finally SVG (reduced):

<?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 1920 1200" 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;">
    <use xlink:href="#_Image1" x="250" y="153" width="954px" height="615px"/>
    <defs>
        <image id="_Image1" width="954px" height="615px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA7oAAAJnCAYAAAC50y8oAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAeh0lEQVR4nO3de9BtdX3f8Q8PMJLgpWgas1JMrCCo/KopNamAWHA68UpiOxFjponVGG3Ey9g0bVPT1DRNapM2OmrirTbGTjVojKZeQGfqJeA1ItEubwjWKJMlRLEiNGQAT//YGzgezgPnsvf+7f3dr9fMM+dw/nj2h+GsPbznt/Z6jggbb2rt6CT3TXJCkh9Ictddvo7d5c+/K8lfJbluP1/X7/Ln1yX5cpLLk/z5MI43Lv1fFAAA4AAc0XsAB2Zq7Zgk90ty4vzrhL1+/4NJjuy3Ljcn+fPMoveWryvmv35xGMcbOm4DAAC2jNBdM1NrR2QWsWcmeViS+2cWs8dnM/977UlyZWbR+4UkH0lyUZIrhnHc03MYAABQ0yaGUylTa0cleUhmYfvw+de9u45ajauSXJxZ9F6c5JPDON7UdxIAAFCB0F2xqbVjk/z9zIL2zCSnZfbZ2W13XZIPZxa9Fyf56DCO1/edBAAAbCKhuwJTaw9Kcm6SxyQ5NclRfRdthJuSfCLJBUneNIzjZzrvAQAANoTQXZKptQdmFrdPTHJK5zkVfDrJm5K8eRjHz/YeAwAArC+hu0BTaydnFrfnJmmd51Q2Zha9bxrG8fO9xwAAAOtF6B6mqbWTctvJ7YM7z9lGn8ptJ72X9R4DAAD0J3QPwfyBUk9J8ozMnpjMevhkklcn+X0PsgIAgO0ldA/C1NrxSZ6dWeAe13kOu/tGZsH78mEcr+w9BgAAWC2hewCm1n4kyfMzuz35yM5zOHA3JXlzkhcP4/invccAAACrIXR3MbV2VJInZBa4p3eew+H7YJIXJ3nbMI439x4DAAAsj9Ddx9TaPZL8bJLnJvnBznNYvC8leVmS1w7j+M3OWwAAgCUQunPzwP3XSc5LcrfOc1i+byV5eZIXDeN4be8xAADA4mx96E6tHZ3k55L8apLv6TyH1fvLJC9M8pphHG/svAUAAFiArQ3dqbUjkpyT5DeTnNx5Dv19Lsm/TPKOYRz39B4DAAAcuq0M3am1v5fkPyc5q/MU1s/7k/yLYRwv6T0EAAA4NFsVulNr90nyG0n+Se8trL3/nuQFwzh+pfcQAADg4GxF6E6t3T2zB009P8kxneewOW5I8ttJ/pMHVgEAwOYoH7pTa0/M7Om639t7Cxvr6iTnDeP4h72HAAAAd65s6E6t3TOzwH1y7y2U8YYkzx7G8Ru9hwAAALsrGbpTa49O8tok3997C+X8RZKnDeP47t5DAACA/SsVulNrd83sacrP7L2F8l6Z5BeHcbyu9xAAAOA7lQndqbUzk7wuyf06T2F7fDHJU4ZxvLj3EAAA4DYbH7pTa8ck+bUkv5AC/z5snD2Z3UXwK8M43tB7DAAAsOFhOLV2apLXJzml9xa23qeT...
       ...
       ..."/>
    </defs>
</svg>

Exports instead a reduced embedded PNG image definition of the whole drawing.

 

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

As a recommend just use what fits your needs best here, meaning for web based drawing and things which have to show up in web browsers etc. the SVG (web) and SVG (export) options are pretty identical and you can use either one here. - If you want instead to print (for prepress etc.) you might want to use the higher resolution SVG (print) output option instead.

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

Another hint for you, if you want your exported web drawings to scale exactly without expanding to the whole size browser pages, always remove those ...

<svg width="100%" height="100%"

... width/height "100%" settings by removing the checkmark for the viewbox check under SVG export "more" panel options. Or you can edit/remove those in a texteditor accordingly, either remove them or replace them just with pixel values instead of percentage values.

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

To be precise, SVG (for the web) is not an option, it is a Preset (set of export options). Click the More button to see options.

 

For example, without Flatten transforms:

<g transform="matrix(0.922466,-0.386079,0.386079,0.922466,-87.7666,149.969)">
    <rect x="256" y="256" width="128" height="128" style="fill:#ffffff;"/>
</g>

With this option, the transformation will be applied to the rectangle:

<path d="M360.879,216.95l-107.929,45.171l45.171,107.929l107.929,-45.171l-45.171,-107.929Z" style="fill:#ffffff;"/>

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.