Ugarz Posted May 8, 2018 Share Posted May 8, 2018 (edited) 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 May 8, 2018 by Ugarz right html Quote Link to comment Share on other sites More sharing options...
firstdefence Posted May 8, 2018 Share Posted May 8, 2018 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> Quote 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 (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 More sharing options...
firstdefence Posted May 8, 2018 Share Posted May 8, 2018 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. Quote 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 (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 More sharing options...
R C-R Posted May 8, 2018 Share Posted May 8, 2018 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. Quote 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 More sharing options...
Recommended Posts
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.