Inline SVG
The Inline SVG widget allows you to seamlessly integrate scalable vector graphics (SVG) directly into your web pages. Unlike traditional images, SVGs are resolution-independent and can be scaled without losing quality. By using SVGs directly in your page, you eliminate the extra HTTP request associated with image tags, and you can apply CSS styles and interactivity to individual SVG elements. It’s a powerful tool for creating custom icons, logos, and illustrations!
Content Tab
SVG
- SVG: This is where you can upload your SVG file by clicking on the plus icon.
- URL: Alternatively, you can provide the URL of the SVG you want to use. Click on the cog icon to configure advanced settings for the URL input.
Style Tab
SVG
- Use Custom Width: Toggle this to make the SVG responsive and allow changes to its width.
- Use Aspect Ratio: When enabled, this allows the SVG to scale while maintaining its aspect ratio, preserving the relative dimensions of width and height.
- Width: Define the width of the SVG. This option is available when 'Use Custom Width' is enabled.
- Height: Define the height of the SVG. This becomes active when 'Use Custom Width' is enabled and 'Use Aspect Ratio' is disabled.
- Remove Inline CSS: Enable this to strip any inline styles from the SVG, which can be useful if you want to style it solely with external CSS.
- Alignment: Choose how you would like to align the SVG within its container (left, center, or right).