Using SVGs for Section backgrounds etc

Support
#1

I know I can use an SVG as a replacement image format for use within backgrounds in sections etc. but I’m wondering if there is a method to allow for that SVG to be placed using an inline SVG. I realize it can’t be done using the standard V2 controls but am wondering if there is a way to target using custom CSS to achieve this.

The reason is I have a variety of vector artwork where I need to be able to target fill colors and strokes and in trying to keep overall site size low SVG was the best option but I can’t target internal SVG classes when they are used as a typical img or in this case a background-image.

The plug-in I’m using for the SVG is called “SVG Support” and it allows me to force inline SVG using X/Pro Image element but I really need/want it to function for background-images within V2 sections etc.

Hope you can help as this would be an awesome game changer for a variety of uses.

Kyle :slight_smile:

#2

Hello Kyle,

Thank you for your detailed post. If you still want to have full control while using svg, the best approach is to use classic raw content element. Though using CSS, we can still inspect using browser developer tools, to access the correct selector for SVG in case you have added it using image or background. See this sample on how to inspect element.

Hope this helps.

#4