Tool to aid with creation of Custom CSS backgrounds - Inline SVG's

Shaking The Habitual
1

I found this useful online tool that is very handy for creating Custom CSS BG’s used in Source and BWD stacks. The tool prepares a normal SVG image for use in stacks that have a Custom CSS background feature such as the Source Container Plus.

The tool can be found at https://yoksel.github.io/url-encoder/

To use it, you open your SVG in a text editor, copy all of the code between and including the <svg … /svg> and paste into the Insert your SVG box in the tool.

Then copy the tool’s Ready for CSS code into the Custom CSS box in the Container Plus stack.

If you want to add a BG colour under the SVG BG then add:
background-color: #0a2730;
before the inserted code followed by a CR. Adjust the #0a2730 to whatever colour you want.

4 Likes
2

That’s a very cool little tool!! Nice find.

I’ll just mention that in Source you could use this approach even with the free stacks by adding a custom css background via the Container Base stack.

1 Like
3

Very good point.