Export inline .svg code for web page (Designer)

[Vallo]

Hello,
I would like to know if it is possible to get the code of a vector image to be used within a .html document.
This is an example of a document exported in .svg: bg.svg
If I try to open such a document with a text editor, I find a lot of useless tags, and especially a "xlink:href" tag which is composed of thousands of lines.

Can someone give me some indication?

Edited October 31, 2020 by Vallo

[IanSG]

2 hours ago, Vallo said:

If I try to open such a document with a text editor, I find a lot of useless tags, and especially a "xlink:href" tag which is composed of thousands of lines.

I'm not clear what the problem is. svg files are text, so there shouldn't be any problem with opening them in a text editor.  xlink:href was deprecated with svg2, so you may have some compatibility issues but what are the other "useless" tags?

[Vallo]

Thank you for your answer.

I was trying to get a clean code with only the basic tags to use within my .html file. I would like to use .svg images with inline code and not using a <img> reference to an external .svg file. That's why I was looking for a very concise code without using non-core tags.

Moreover (I don't know if you have looked at the file I uploaded in my open post) the file that is generated by Affinity contains a tag "xlink:href" that contains about 799723 characters. In practice I'm generated a monstrously infinite .svg file, when I drew only 4 simple geometric shapes.

I don't know if I made a mistake in the export process. Is there a particular process to create a .svg file suitable for insertion/modeling on websites?

[David in Яuislip]

This
<image id="_Image1" width="5916px" height="1416px" xlink:href="data:image/png;base64,iVBORw0KG----kSuQmCC"/>
is a png image encoded as base64 data and I suspect it's the shadow rasterised

I suggest having a look at my previous response to a similar question a while back
https://forum.affinity.serif.com/index.php?/topic/121183-svg-how-to-avoid-large-file-sizes-using-gradientsshadows/&tab=comments#comment-661317
Good luck

[IanSG]

1 hour ago, Vallo said:

Moreover (I don't know if you have looked at the file I uploaded in my open post) the file that is generated by Affinity contains a tag "xlink:href" that contains about 799723 characters. In practice I'm generated a monstrously infinite .svg file, when I drew only 4 simple geometric shapes.

I looked at the code, but not the image - I didn't realise it was so simple.  Hopefully @David in Яuislip's advice will fix things, but if not it's worth remembering that inline images aren't cached.

[v_kyr]

2 hours ago, Vallo said:

...the file that is generated by Affinity contains a tag "xlink:href" that contains about 799723 characters. In practice I'm generated a monstrously infinite .svg file, when I drew only 4 simple geometric shapes.

I don't know if I made a mistake in the export process. Is there a particular process to create a .svg file suitable for insertion/modeling on websites?

Well you applied to your geometric shapes some linear gradients, such parts (as all FX effect parts too) aren't and can't be treated as vectors by Designer. Meaning here, that initial vector shapes with such applied effects are then converted into bitmap/raster drawing portions. Thus when exporting in a default/usual SVG manner those parts will be exported as base64 bitmap data, which in turn results to your many 799723 characters (all that is base64 encoded bitmap data).

In order to prevent that, you would have to export only as plain vectors (settable via the SVG "more" export options), so that those gradients and FX effects (shadows etc.) won't be exported at all together.