SVG

Inject inline SVG images into the page markup and style them with CSS.

SVGs or Scalable Vector Graphics are really handy, for example to display a logo that remains crisp when scaling or that is animated. The SVG component provides more control to style and animate the image and its vector parts. It injects the image into the markup as an inline SVG including all attributes, like IDs, classes, width and height, so that they can easily be targeted using CSS.

Usage

To apply this component, add the uk-svg attribute to an <img> element.

<img src="" width="" height="" uk-svg />

Using the uk-svg attribute also allows you to inject a symbol from the SVG file. Just append the symbol’s ID to the image path as you would in any fragmented URL.

Copy to clipboard
  • <!-- Targets the SVG image -->
    <img src="/images/cloud-download.svg" width="40" height="40" uk-svg />
    
    <!-- Targets a symbol inside the SVG image -->
    <img src="/images/icons.svg#cloud-upload" width="40" height="40" uk-svg />

Note SVGs will adapt the current color for their stroke and fill color. To prevent this behavior, add the .uk-preserve class to the SVG itself or the elements inside the SVG.

Note The loading="lazy" attribute for <img> elements is taken into account, and SVG images will be injected as inline SVG as they enter the viewport.

Stroke Animation

There are two ways to animate SVG strokes. First by using the Animation component and uk-svg="stroke-animation: true", and second by using the Parallax component.

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

OptionValueDefaultDescription
srcStringThe SVG source URL. If a location hash is present, only the <symbol> of the SVG with the given ID is shown.
stroke-animationBooleanfalseAnimate all elements with the stroke attribute in the SVG.

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.svg(element, options);

Properties

svg

A JavaScript Promise that will resolve with the added SVG Node.

UIkit.svg(element).svg.then(function (svg) {
  svg.querySelector("path").style.stroke = "red";
});

Theme development

On your tailwind.config.js file, add the SVG component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        svg: {
            hooks: {}
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-misc*