SVG Export - Differences - AD

[TamaraMtz]

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

[v_kyr]

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.

 

[v_kyr]

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.

[TamaraMtz]

I was really looking for the differences but I did not find any post where they explained it in such a detailed way, now I have no doubts. Thank you very much, hug!

[v_kyr]

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.

[TamaraMtz]

Oh! understood, thank you very much again. It will be useful for me. 

[jenkm]

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;"/>

 

[TamaraMtz]

Oh, well thank you very much for that information. I already understand the difference. :D