Widgets & Extensions

Inline SVG

General

The Inline SVG widget lets you add any SVG in Elementor, and modify it’s size and colour, including on hover and link it to a custom URL.

Why use Inline SVG?

Normally, WordPress does not support SVG files to be uploaded, but you can enable it and allow uploads of these mime types. That means that you can use them as images in Elementor. But images take some time to load because they are separate resources requested by the browser. They are external files. The Inline SVG widget outputs the code from the SVG file directly on the page, allowing you to optimise the load time and access the power of SVG. Having the image outputted as code rather than using an <img> tag also lets you change the colour of the artwork for it’s default state and on hover. And you can do that directly from the widget controls.

Before you get started, it’s important to read up on some basic notions of SVG on the web. This is a good article for beginners: https://css-tricks.com/using-svg/

How it works

You start by selecting the SVG source file and our widget takes care of the rest. Meaning it takes the code from the file and outputs it directly on the page so no additional requests to external files are made when the page loads. We provide a few controls to play around with, which are outlined below. Please read the FAQ section below for some important information on using this widget.

Settings

  • Content
    • Choose file — The SVG file you want to the widget to use
    • Link — Add a link or just leave blank if you don’t want the image to be linked
  • Style
    • Alignment — Align the artwork inside the widget to “Left”, “Center” or “Right”.
    • Sizing — This control does two things: 1. It makes the contents of the widget responsive so that it scales nicely depending on the screen size and 2. It allows your to change the size of the artwork in pixels or percentages inside the widget container.
    • Keep aspect ratio — Maintains width / height ratio intact.
    • Width — Controls the width of the SVG in pixels or percentage. Is available only if Sizing is set to “Yes”.
    • Height — Controls the height of the SVG and is only available if Keep aspect ratio is set to “Yes”. Otherwise, the height of the SVG is determined by its width so that the ratio of the artwork is kep intact.
    • Convert CSS to attributes — Sometimes a SVG might have internal or inline CSS styling preventing you from setting a custom colour. This happens usually when exporting artwork from Illustrator. Keeping this option on will prevent strange colour behaviour when multiple Inline SVG widgets are on the same page.
    • Override colour — Override the default colour of all shapes inside the SVG.
    • Transition — Controls the way the colour transitions when the SVG is hovered.
    • Colour — Overrides the default colour of the shapes inside the SVG.
    • Hover Colour — The colour of the shapes when the SVG is hovered.

FAQ

Why does the colour not change?

SVG’s are files with tags (such as HTML) that define shapes and their properties (such as position, colour, borders etc.). In some SVG files the colours are defined inline (style=”color: blue;”) or as classes (internal css) inside the code of the file. This is the case with Illustrator, which lets you choose how you want the styling to be applied when you export to SVG. In most cases, the default is Inline Style or Internal CSS (the two cases described above). If you create the artwork yourself, choose Presentation Attributes as the value for Styling inside the SVG Options window. If you don’t choose this, you can use the Convert CSS to attributes option that tries to convert internal css and inline styles to presentation attributes.

In some (very rare) cases, the way the SVG is built might not make it possible to change colour due to the way the artwork is structured. We recommend having a clean SVG file with clear shapes, without masks and unnecessary grouping. Have a look inside the SVG file and try to clean it up if possible.

Usually flat (single color) icon packs which you can find online are clean and can be used without any issues. One good example is https://iconmonstr.com/.

My SVG will simply not show up

In Chrome, go to View > Developer > Developer Tools. In the panel that appears, click on the Console tab and see if you have any errors (in red). If it’s a SSL (insecure content) issue please install a plugin such as https://wordpress.org/plugins/force-https-littlebizzy/ and try again.

If this doesn’t fix it, with the Developer Tools still open, go to the Elements tab and try to find your widget element. See if you can find the <svg> tag. If it’s there, then your SVG is not properly formatted and you need to either fix or use another one. Try to also open your SVG file inside the browser to see if it shows. If it does, please contact us.