Jump to content

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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.

 


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

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

Share this post


Link to post
Share on other sites

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...

 

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

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 

Share this post


Link to post
Share on other sites

@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

 

Share this post


Link to post
Share on other sites
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 ...

... there you can learn SVG and try it out yourself.


☛ Affinity Designer 1.7.3 ◆ Affinity Photo 1.7.3 ◆ OSX El Capitan

Share this post


Link to post
Share on other sites
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.


Affinity Photo 1.7.3, Affinity Designer 1.7.3, Affinity Publisher 1.7.3

macOS 10.15

MacBook Pro

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Please note the Annual Company Closure section in the Terms of Use. These are the Terms of Use you will be asked to agree to if you join the forum. | 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.