SVG - export

[mjut]

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!

[firstdefence]

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.

 

[mjut]

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

 

[Geoff777]

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.

 

[Bad_Wolf]

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

 

[mjut]

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!

[scottf]

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 

[mjut]

@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

 

[v_kyr]

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.

[h_d]

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.