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

Recommended Posts

Hi,

I'm facing an issue when I export SVG with Affinity Designer. I'm working on a website and would like to export an SVG in the best way following some guidelines describes here : https://www.sarasoueidan.com/blog/svg-tips-for-designers/.

 

My Issue :

I want to export in SVG a shape and move it with code. When I export it, I get a <path d="..."> instead of a <polygon> or <rectangle>. Sadly I'd like to have a <polygon> object in order to move it with Javascript. Can anyone tell me what am I doing wrong ?

 

I would like to do someting like that

<polygon points="215, 110 0, 110 0, 0 47.7, 0 215, 0"/>

But I get path like this 

<path d="M1920,0l-1669.99,0l-250.011,0l0,1200l1920,0l0,-305.211l0,-894.789Z" style="fill:#fa9090;"/>

 

animation.svg

pos2.svg

pos3.svg

Edited by Ugarz
right html
Link to comment
Share on other sites

Affinity exports SVG's in a particular format that can only be edited after the fact. You can go to pretty much any app that will export an svg and there will be some variation in the code written.

 

Sketch exports SVG with Code:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
    <title>Oval</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <circle id="Oval" fill="#000000" cx="100" cy="100" r="100"></circle>
    </g>
</svg>

While Affinity Exports SVG with Code:

<?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 1280 800" 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;">
    <g transform="matrix(1.11732,0,0,1.11732,50.838,44.1341)">
        <circle cx="133.5" cy="139.5" r="89.5"/>
    </g>
</svg>

 

Affinity also exports different code for SVG under different export options such as Export and Web

 

For 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 200 200" 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;">
  <circle cx="100" cy="100" r="100"/></svg>

For 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 200 200" 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;">
    <g transform="matrix(1,0,0,1,-100,-100)">
        <g transform="matrix(1.11732,0,0,1.11732,50.838,44.1341)">
            <circle cx="133.5" cy="139.5" r="89.5"/>
        </g>
    </g>
</svg>

 

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

 

I've seen Path to Polyline converters like this one: http://betravis.github.io/shape-tools/path-to-polygon/ but it doesn't convert your polygon correctly.

 

There is a Polyline to Path converter on Codepen.io: https://codepen.io/jakealbaugh/full/GZwgzV whether this could be reversed to be a path to polyline converter you would have to ask the creator Jake. I've asked Jake if it's possible to reverse his converter from Path to Polyline.

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

45 minutes ago, firstdefence said:

You can go to pretty much any app that will export an svg and there will be some variation in the code written.

Not that it helps other than to maybe partially explain why this is so, it may be worth reading this interview with Jon Ferraiolo, sometimes called "the father of SVG." Basically, there were a lot of different ideas about what the SVG standard should support & they pretty much included all of them. :o

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

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.