How to add html .svg code as background?

Need help
1

Hey!

I would like to add svg codes as a background. For example this code:

<svg width="100%" height="100%" viewBox="0 0 812 812" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs></defs> <g id="New-home" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Artboard-2"> <g id="Group"> <rect id="Rectangle-13" fill="#EDF1FE" x="0" y="0" width="100%" height="100%"></rect> <rect id="Rectangle" fill="#474C5C" transform="translate(406.000000, 406.000000) rotate(-315.000000) translate(-406.000000, -406.000000) " x="279" y="279" width="254" height="254"></rect> </g> </g> </g> </svg>

Anyone an idea how this could work?

1 Like
2

If you save the code as an .svg file, you can create a group with background style set to image, choose Static Image, and then upload this as the image you want to set. Same thing for a shape or repeating group.

Hope that helps!

1 Like
3

Aah yes thanks. But it needs to be code because need to be able to change the color codes of the image dynamically.

I now use a HTML Element but this element doesn’t collapse when the page gets less higher… So have an empty space at the bottom of the page.

4

I use toolbox plugin - give the html an ID, place it in a floating group with an ID as well. Give the floating group and the html a height of 100vh on page load with the toolbox workflow. Stick the .svg code in the html, place the floating group behind the page - make sure your page is transparent or it won’t show.

Some browsers won’t render preserveAspectRatio properties correctly so test and if needed add when page width conditionals to change the picture. I think it defaults to is xMinYMin Meet so if your svg is not wide enough you’ll always get the blank space at the bottom. Remove the width height and use viewbox values to make sure it scales. You can do that easily with SVGOmg:

https://jakearchibald.github.io/svgomg/

If you need me to make a tutorial let me know and I will, I’ve been thinking about it just haven’t had the time yet.

1 Like
5

Thanks Duke!

For some reason just the floating group with the html element inside works perfect!

1 Like
6

This topic was automatically closed after 70 days. New replies are no longer allowed.