Maybe I am overthinking it … we have many options to set an image as a background and overlay it with some e.g. header stack/ text, but is there a way to use an SVG image as background ? Or some other easy way to overlay a header on an SVG image ?
If you are using Source you can use the Custom CSS background function to add an SVG BG. Works well for repeating tiled SVGs but if using a large single SVG you may need to edit the aspect ratio of the SVG inside the SVG if you want to preserve it’s aspect ratio. Not needed if you don’t mind the SVG distorting with it’s viewed aspect ratio.
That sounds easy … I tried using the ‘Container Plus’ and simply copied the SVG code (<SVG …) into the CSS field, but that didn’t do it. Do I have to call the SVG file, or obey a specific syntax ?
I googled for inline SVG in CSS … oops, a bit above my immediate pay grade, lol. I will try things, but if someone has a simple working example, I would appreciate the help a lot.
Thanks for your support, cheers
You need to enter something like:
background-image: url('image.svg')
or
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PGxpbmVhckdyYWRpZW50IGlkPSdncmFkaWVudCc+PHN0b3Agb2Zmc2V0PScxMCUnIHN0b3AtY29sb3I9JyNGMDAnLz48c3RvcCBvZmZzZXQ9JzkwJScgc3RvcC1jb2xvcj0nI2ZjYycvPiA8L2xpbmVhckdyYWRpZW50PjxyZWN0IGZpbGw9J3VybCgjZ3JhZGllbnQpJyB4PScwJyB5PScwJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJy8+PC9zdmc+");
Where the SVG has been converted to base64
or background-color: #63f7ff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23000' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%2363f7ff' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%2342eafa' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E"); background-size: cover;
Where the SVG code has been URL escaped, i.e. colours such as #000 get converted to %23000.
Try Googling inline svg background
Also this is a very useful URL SVG encoder - https://yoksel.github.io/url-encoder/
Thank you so much for pointing me in the right direction. I will explore it a bit later on, and if successful, will paste an example myself.
Cheers !
There is a bit of a learning curve but when you figure it out it’s one of those magic moments.
1 Like
Wow, the tool immediately got me to the point of showing the SVG as background image. At the moment it is tiled, though I am rather looking for a ‘distorted’ single shape. Anyhow, I shall learn a bit more and should be able to get there - hence, I already marked your earlier response as a solution.
Indeed - magic in the works ;) Thanks again ! … and another + for ‘Source’
In that case you can use something like:
background-image: url('.\resources\image.svg') by putting `image.svg’ in resources or use a warehoused SVG.
1 Like
As per @Webdeersign’s last comment - use an normal background image to load your SVG wherever possible. Only insert SVG’s as inline XML if you need to use CSS to alter the image properties / colours etc.
Inlining large SVG’s can add a lot of code to the page but worse still can cause problems with duplicate id’s and class names if you are creating them with a vector drawing app - none of this is insurmountable is you really need to but it is a lot of work and unnecessary risk when a normal image is required.
Inlining is great for icons and smallish vector files - just use the right approach for the situation.
1 Like
Thanks Gary @Webdeersign and Andrew @tav for providing such valuable help to get started and being able to search the right places.
For others stumbling across this thread, I would like to add a few comments after reading more about the powerful CSS capability to add a background image to essentially any stack. While the ‘Source Container Plus’ stack has a dedicated CSS field to enter the code, the standard RW CSS area (site or page wide) allows to also define a SVG background class, that can be applied to any stack (at least with ‘Stacks 4’ or stacks that allow to assign a custom CSS class).
.mySVG {
background-image: url("path/to/gradient.svg");
background-size: 100% 100%;
background-repeat: no-repeat;
}
then enter the class “mySVG” e.g. in the ‘HTML’ section of the stack of interest.
The CSS ‘background’ command allows to load all kind of images, specify their size, the alignment, possible pattern repetitions, and much more - there are also shorthand notations. All worth while digging a bit deeper into it (e.g. https://www.w3schools.com/cssref/css3_pr_background.asp).
Since I wanted to have my SVG background to stretch across the entire area, and the SVG file did contain a viewBox definition (which defines the aspect ratio of the image), stretching was only possible after I added a preserveAspectRatio='none' into the SVG code. That brought me to the finish line … see below examples with and without preserving the original aspect ratio
4 Likes