Adding SVG graphics to your Sparkle project is like unlocking a treasure trove of extra features, especially when spicing up your page headers. What’s really good about SVGs is that they retain transparency, and with the right SVG format, you can splash any color you want onto your graphics using Sparkle’s Color Overlay feature in the style panel. They are also very small files, no matter how large you create them on the canvas. If you’re ready to dive in? Grab a bunch of SVGs I’ve put together just for Sparkle users – you can grab them in a zip file from the link below (23 in total).
SVGs are a breeze to work with. You can duplicate them, move them around, and stack them up for some seriously nice layering effects. Plus, they’re perfect for creating image cutouts , giving your pages that slick “image behind a shape” look. They can also be used as block dividers between sections of your page In our small collection, we’ve even added a shadow effect to give everything a bit of depth. This can sometimes be a problem with some SVG files because the shadows can often force the conversion of the SVG into a bitmap within an SVG container. These types of SVG can’t have a colour overlay applied in sparkle. However, our SVG’s keep the bitmap shadows separated from the main shape, meaning they will accepts a colour overlay.
Check out some examples below to see how these shapes can give your web page headers a fresh look.
If you’ve got ideas for more shapes you’d like to see, drop a comment in this thread, and let’s keep the SVG party going in your Sparkle projects.
Download SVG Shapes
4 Likes
Interesting @francbrowne I’ve downloaded them and hopefully have a play around later with them. Thank you, Si.
Thanks for sharing those svg’s, Frank. They are fun to play with. I really dig the wave one. Just one question: How do I manage to get them to stretch to full page width?
Thanks again!
Thomas
@ThomasC can you place it as a background image in a WideBox?
That would stretch it across the browser window.
@FlaminFig Yeah, I did that. Though it works, I cannot change the colour of the svg, just fill the box with colour. Also I cannot create the effect piling them one over the other with a slight distance.
@ThomasC as mentioned by @francbrowne some SVGs aren’t true to their nature.
I sometimes have the same issue with created SVGs. I’m surprised Canva’s generated SVGs always works! Just make sure the backgound is set to transparent.
At this stage when placing a SVG in a Box or Widebox there is no ability to recolour. We can only do that in an Image container - which of course we can’t stretch to fill the browser window…
@FlaminFig I See. Too bad I would love the use the wave full width in different colours…
Thanks for the insight!
1 Like
Hi Thomas,
Unfortunately, SVG’s can only have colour overlays applied when they are added as image files - not as box fills, This means that some SVG’s will look better than others, depending on their structure. For example, you can create a full width look to these elements by layering them with wide boxes and filling them with the same colour you apply to the SVG. Take the example below.
The svg’s are extended to full CANVAS width (not browser width) on the page, with much of the left side of the svg image being transparent. In our example, we added two wide layout boxes BEHIND the SVG’s One was filled with the grey backgound colour, the other with the same red colour used on the top SVG Layer. You use the background shift option on the wide boxes to make sure that the join between the two wide box colours sit behind the solid portion of the SVG graphics. This will extend the colours to the full browser width.
With some SVG’s, particularly those designed with a background image in mind, you can add the image as a background to a wide box, like in the example below, whilst leaving the left side of the screen as a wide background box containing just the solid colour. You would then drop the SVG graphic over the top of the wide boxes and extend them to full canvas width - they were designed specifically for use at 1200px wide.
Clearly, not every design is suitable for browser-wide use, but some can be successfully deployed - its all a question of finding a suitable design that allows you to be a little more creative. That’s why I asked in my original post if there were any specific designs or shapes that users may want. If they’re not too difficult to achieve, I may add another collection later on.
@francbrowne Hello Frank! How interestering! This opens a whole new world for me as an amateur “designer”. I am so grateful for your detailed answer. I will dive into it later and might take you up on this in case I have some design ideas. Thanks a lot!
Cheers,
Thomas
