mjut Posted November 14, 2019 Share Posted November 14, 2019 Hi there, I need to export a drawing to SVG – I am using Affinity Designer on MacOS – Is there a way to define the markup style in the SVG-file? I need the path-tag to be like this: <path fill="none" stroke="#000000" stroke-width="2" d="M257,1.5"/> But the SVG-output from Designer is like this: <path d="M68.5,260.5l193,-189" style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:2px;"/> Visually, the output is the same – but I need the SVG to be written like the first example. Is there a setting to achieve this? The reason behind this is as following: For a web page, I am using the css-framework https://getuikit.com/ For a simple SVG-animation, I need the SVG to be written like the first example above. If I put the Designer-SVG into my code, the animation is simply not working... Thanks for any suggestions! Quote Link to comment Share on other sites More sharing options...
firstdefence Posted November 14, 2019 Share Posted November 14, 2019 The SVG Code produced is not variable/definable within any of the Affinity apps. Affinity have chosen to export SVG with that code format, I'd say the only options you have are to find an app that produces SVG code as you want or literally write the code. You could maybe use an editor to change things en masse to the format you want i.e a kind of find & replace option. 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...
mjut Posted November 14, 2019 Author Share Posted November 14, 2019 Okay, I thought so. No big deal, usually either way of the generated code is fine. Its just this one situation when I want to use the SVG for an animation. I tested writing the SVG in Illustrator, that works for now. But as I want to get rid of all Adobe related Apps I need to find a different solution. Re-writing the code is an option, but I am so lazy... I need to look into automatically "find & replace"... Umm, or I could write an AppleScript to do that for me... Quote Link to comment Share on other sites More sharing options...
Geoff777 Posted November 16, 2019 Share Posted November 16, 2019 Have you tried running the file through this site?: https://svgomg.firebaseapp.com I upload SVGs to a site with a very strict, low, file size limit and it often won't accept AD SVGs (gives an error saying not recognised, particularly gradients) but often works after running through SVGOMG. It does change the text and also usually reduces file size. Don't know if it will work for what you need to do but might be worth a try. Alfred and mjut 2 Quote Link to comment Share on other sites More sharing options...
Bad_Wolf Posted November 16, 2019 Share Posted November 16, 2019 If you can program or you find a programmer, you can write an application which converts for you. Not an easy task but surely not impossible. I am willing to help you with the programming but I cannot do it for free. I will see if I can write a short demo this weekend if you are interested. Chris Quote Link to comment Share on other sites More sharing options...
mjut Posted November 18, 2019 Author Share Posted November 18, 2019 On 11/16/2019 at 10:23 AM, Geoff777 said: Have you tried running the file through this site?: https://svgomg.firebaseapp.com I upload SVGs to a site with a very strict, low, file size limit and it often won't accept AD SVGs (gives an error saying not recognised, particularly gradients) but often works after running through SVGOMG. It does change the text and also usually reduces file size. Don't know if it will work for what you need to do but might be worth a try. @Geoff777 Nice! – That did the trick. Thank you! Geoff777 1 Quote Link to comment Share on other sites More sharing options...
scottf Posted December 6, 2019 Share Posted December 6, 2019 Hi, I'm a newby to the SVG party....and quite confused. I want to place the svg code in my website and need the svg code rather than the svg image. How do I get the svg code please once I export from Designer or is there an app to convert the svg image into code? I am using Affinity Designer 1.7.3 on Mac OSX 10.14.6 Many thanks for your hope. Cheers Scott Quote Link to comment Share on other sites More sharing options...
mjut Posted December 6, 2019 Author Share Posted December 6, 2019 @scottf You want to open your SVG-file in a text editor. (Sublime Text, Atom...) That is the code, you d want to place into your html. You ll find examples ---> google.com Quote Link to comment Share on other sites More sharing options...
v_kyr Posted December 6, 2019 Share Posted December 6, 2019 20 minutes ago, scottf said: I want to place the svg code in my website and need the svg code rather than the svg image. How do I get the svg code please once I export from Designer or is there an app to convert the svg image into code? Well I suggest you take some tutorials about SVG in order to get an overall better understanding of SVG. - See for example here ... SVG Tutorial ... there you can learn SVG and try it out yourself. Quote ☛ 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 More sharing options...
h_d Posted December 6, 2019 Share Posted December 6, 2019 1 hour ago, scottf said: How do I get the svg code please once I export from Designer or is there an app to convert the svg image into code? Ctrl-click or right-click or 'secondary click' on the .svg file, choose Open With... BBEdit, CotEditor, even Apple's own TextEdit will open it, among many others. Or you can change the '.svg' filename extension to ".txt" and the file will open in your default text editor. Quote Affinity Photo 2.0.3, Affinity Designer 2.0.3, Affinity Publisher 2.0.3, Mac OSX 13, 2018 MacBook Pro 15" Intel. 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.