Jump to content
Vallo

Export inline .svg code for web page (Designer)

Recommended Posts

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 by Vallo

Share this post


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


AP user, running Win10

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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


Microsoft Windows 10 Home, Intel i7-9750H CPU @ 2.60GHz, 16 GB RAM, 500GB SSD, 1TB Whirlygig, NVIDIA GeForce RTX 2060
Affinity Photo - 24/05/20, Affinity Publisher - 06/12/20, KTM Superduke - 27/09/10

Share this post


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


AP user, running Win10

Share this post


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


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

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...

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.