vue-inline-svg

Vue Inline SVG

Vue component loads an SVG source dynamically and inline <svg> so you can manipulate the style of it with CSS or JS. It looks like basic <img> so you markup will not be bloated with SVG content. Loaded SVGs are cached so it will not make network request twice.

Using Vue v2?

Check old version vue-inline-svg@2

• Install
  • NPM
  • CDN
• Usage
  • props
    • src
    • title
    • uniqueIds
    • uniqueIdsBase
    • keepDuringLoading
    • transformSource
  • SVG attributes
  • events
    • loaded
    • unloaded
    • error
• Comparison
• Changelog
• Contributing
• License

Install

NPM

npm install vue-inline-svg

Register locally in your component

import InlineSvg from 'vue-inline-svg';

// Your component
export default {
    components: {
        InlineSvg,
    }
}

Or register globally in the Vue app

import { createApp } from 'vue'
import InlineSvg from 'vue-inline-svg';

const app = createApp({/*...*/});
app.component('inline-svg', InlineSvg);

CDN

<script src="https://unpkg.com/vue"></script>
<!-- Include the `vue-inline-svg` script on your page after Vue script -->
<script src="https://unpkg.com/vue-inline-svg"></script>

<script>
const app = Vue.createApp({/*...*/});
app.component('inline-svg', VueInlineSvg);
</script>

Usage

<inline-svg
    src="image.svg"
    transformSource="transformSvg"
    @loaded="svgLoaded($event)"
    @unloaded="svgUnloaded()"
    @error="svgLoadError($event)"
    width="150"
    height="150"
    fill="black"
    aria-label="My image"
></inline-svg>

Example

props

- src

Type: string Required

Path to SVG file

<inline-svg src="/my.svg"/>

Note: if you use vue-loader assets or vue-cli, then paths like '../assets/my.svg' will not be handled by file-loader automatically like vue-cli do for <img> tag, so you will need to use it with require:

<inline-svg :src="require('../assets/my.svg')"/>

Learn more:

• vite: https://vite.dev/guide/assets.html
• vue-loader: https://vue-loader.vuejs.org/guide/asset-url.html#transform-rules
• vue-cli: https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling

- title

Type: string

Sets/overwrites the <title> of the SVG

<inline-svg src="image.svg" title="My Image"/>

- uniqueIds

Type: boolean | string

Add suffix to all IDs in SVG to eliminate conflicts for multiple SVGs with the same source. If true - suffix is random string, if string - suffix is this string.

<inline-svg src="image.svg" :uniqueIds="true"/>
<inline-svg src="image.svg" uniqueIds="my-unique-suffix"/>

- uniqueIdsBase

Type: string

An URL to prefix each ID in case you use the <base> tag and uniqueIds.

<inline-svg src="image.svg" :uniqueIds="true" uniqueIdsBase="http://example.com""/>

- keepDuringLoading

Type: boolean; Default: true

It makes vue-inline-svg to preserve old image visible, when new image is being loaded. Pass false to disable it and show nothing during loading.

<inline-svg src="image.svg" :keepDuringLoading="false"/>

- transformSource

Type: (svg: SVGElement) => SVGElement

Function to transform SVG content

This example create circle in svg:

<inline-svg src="image.svg" :transformSource="transform"/>

<script>
const transform = (svg) => {
    let point = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
        point.setAttributeNS(null, 'cx', '20');
        point.setAttributeNS(null, 'cy', '20');
        point.setAttributeNS(null, 'r', '10');
        point.setAttributeNS(null, 'fill', 'red');
        svg.appendChild(point);
    return svg;
}
// For cleaner syntax you could use https://github.com/svgdotjs/svg.js
</script>

SVG attributes

Other SVG and HTML attributes will be passed to inlined <svg>. Except attributes with false or null value.

<!-- input -->
<inline-svg
    fill-opacity="0.25"
    :stroke-opacity="myStrokeOpacity"
    :color="false"
></inline-svg>

<!-- output -->
<svg fill-opacity="0.25" stroke-opacity="0.5"></svg>

events

- loaded

Called when SVG image is loaded and inlined. Inlined SVG element passed as argument into the listener’s callback function.

<inline-svg @loaded="myInlinedSvg = $event"/>

- unloaded

Called when src prop was changed and another SVG start loading.

<inline-svg @unloaded="handleUnloaded()"/>

- error

Called when SVG failed to load. Error object passed as argument into the listener’s callback function.

<inline-svg @error="log($event)"/>

🛡️ Security Considerations

Inlining SVGs directly into the DOM provides flexibility for styling and interaction. However, it can pose risks of XSS (Cross-Site Scripting) attacks. SVGs can contain JavaScript (<script> tags), event handlers (onload, onclick, etc.), or external references (<use xlink:href="..."), which could be exploited.

To ensure security, follow these guidelines based on your SVG source:

1️⃣ SVGs from your project assets

Manually check they don't contain any harmful elements or attributes (scripts, event handlers, external references)

2️⃣ SVGs from third-party sources or user-generated content

Always sanitize before inlining. Use DOMPurify

<inline-svg
    src="https://example.com/external.svg"
    :transformSource="sanitize"
/>

<script>
    import DOMPurify from 'dompurify';

    function sanitize(svg) {
        svg.innerHTML = DOMPurify.sanitize(svg.innerHTML, { USE_PROFILES: { svg: true } });
        return svg;
    }
</script>

Comparison

• This module:
• vue-simple-svg: , does not cache network requests, has wrapper around svg, attrs passed to <svg> are limited, converts <style> tag into style="" attr
• svg-loader uses different approach, it inlines SVG during compilation. It has pros that SVG is prerendered and no http request needed. But also it has cons that markup size grows, especially if you have same image repeated several times. (Discussed in #11)

Changelog

CHANGELOG.md

Contributing

CONTRIBUTING.md

License

MIT License

Changelog

4.0.0 - 2025-02-05

• Add: uniqueIds prop
• Fix: merges inline styles on root svg properly now
• Refactored to Vue SFC's script setup and typescript
• Types now generating automatically
• BREAKING changed internal file paths