I have just purchased Affinity Designer and Publisher.
I want to export an image to svg code so I can place it in @joeworkman JW Foundation 6 SVG stack as code.
But all I seem to get when exporting from Affinity is an svg image…how do I convert that image to suitable svg code?
Can’t see anything in Affinity Designer to export as code, it just exports as svg image.
SVG image is attached…mmmm, no it’s not…svg extension is not supported to upload here.
Drop the SVG “image” into a text editor. I use BBedit. You will then see the code.
Before doing it, run it thru ImageOptim (free), this pulls out all hte code you don’t need, so making it easier to copy the code from BBedit (or similar)
Make sure that you are only pasting valid XML - i.e. strip anything outside of the <svg>tags.
Make sure that you know why you are choosing to use an inline XML svg - it should be because you need to address the strokes fills etc via class name
Remember that each time you create an SVG in an editor like affinity it will apply the same id’s to elements and so you may well end up overriding the colours of a previous SVG on the page.
Remember to “Convert to Curves” any text in the SVG or else it will not work on other peoples computers who may not have your fonts installed.
Do not use inline SVG’s for raster content or complex shadows etc - they will end up considerably larger than and equivalent png or jpg and you will get no benefit as those elements will not be vectorised.
Summary of the above- whenever pasting code into your project, understand what you are pasting and why.
Remember that the alternative is just to use the SVG in and image tag by loading it as a warehouse image or via resources. This will behave as a normal responsive image (which inline SVG’s will not.)
Inline SVG’s are ideal for small icons and when you want to apply hover effects etc.
Affinity Designer specific: Preferences> General - Copy Items as SVG will allow you to copy a layer to the clipboard as an SVG tag and paste it into a text editor or RW without the extraneous cruft.
here is a little tutorial video that I made a couple of years ago. It refers to BluePrint SVG stack but the principle is the same. The first part s the Affinity part. https://vimeo.com/224299235
It seems using SVG’s is very case specific, I was looking at it for a logo but the logo has 2 versions. And as you mentioned in point 3 I’m getting elements being overridden. Not a great system and in fact very annoying.
Is there a method to rewrite the duplicate element so it doesn’t overwrite?
Much easier to just use a warehoused png.
Also SVG’s don’t seem to save on size a great deal.
Seems to me that using SVG’s is quite limited and maybe I haven’t missed much at the SVG party.
[quote=“scottf, post:25, topic:1364”]
Not a great system and in fact very annoying … Seems to me that using SVG’s is quite limited [/quote]
You remind me of the guy who got the written invitation to go to a Toga Party, quickly read the invitation and turned up at the party dressed as a Goat! If he had spent more time reading the invitation properly, he would have chosen the correct costume for what was a great party.
You just have to put some time into understanding SVGs and there is a wealth of knowledge right here in this very thread that you should read.
The SVG party has been raging for years and finally F6 is catching to what others have been doing. So in addition, I would suggest reading the F6 documentation on how F6 handles SVG, when to use an SVG and how to save and edit an SVG.
On the other hand, if you don’t want the potential advantages of using SVG, or maybe you are not aware of them, then just warehouse a PNG or just a local RW PNG.
What I meant by “not a great system and in fact very annoying” was what Tav had mentioned “…that each time you create an SVG in an editor like Affinity it will apply the same id’s to elements and so you may well end up overriding the colours of a previous SVG on the page.”
Which was something I was finding happening to my 2 logo versions and I was wondering if there was a way to rewrite the duplicate elements that Affinity creates.
But you are correct…lots of good info here and on other forums regarding SVG. I am discovering that SVG’s have great features and uses.
I am getting my head around it and the specific use cases that will work for me.
To obviate the overriding styles problem you will need to edit the XML output from infinity.
You will see some code that says id= in various places. If this is duplicated in SVG’s then the last one on the page will win. You just need to change the text of the id’;s so that each SVG is unique - NOTE: often you can do this by just changing the layer or group names in affinity as these are used to generate a lot of the id’s.
If not then using a decent text editor (I use Sublime Text or VSCode for the purpose.) Then just do a search and replace, So if you have for example id="group1" then do search and replace for all group1 occurrences and replace them with group1a or whatever you like. Don’t include the id in the replace as you need to catch all group1 instances - particularly the ones in the CSS inline styles that are causing the problem.
You don’t have to use Affinity Designer as almost every other app can export as SVG.
A good source of SVG’s is to use pre made SVG versions such as the FA5 SVG icons you can download for free. You could use the free Nucleo as an Icon manager to load these FA5 icons, then right click on the one you want and copy the code and then paste into a suitable SVG stack. Note the FA5 SVGs come with the pre omitted from the “exported SVG”.
Again it depends what you are try to do but understanding SVG’s is key to using them.
You can also use unique names in for each item (Group, rectangle, curve) in the Affinity layers panel. That name will be the ID Affinity uses in the SVG.