Inline SVG IDs collision #32

vralle · 2023-10-05T13:53:46Z

vralle
Oct 5, 2023

Hi there!

I use svg icons over all my projects and HTML Bundler Plugin for Webpack works great with it.

But now I'm faced with a scenario where there is no obvious solution.

I'm using inline SVGs and some pages have some code:

src/template.html

...
<h2>We are social</h2>
<a href="https://t.me/<username>">
    <img src="./img/icons/social/telegram.svg" alt=""> <b>Follow us in Telegram</b>
 </a>
...
<h2>Chat with us</h2>
<a href="https://t.me/+<phone_number>">
    <img src="./img/icons/social/telegram.svg" alt="">  <b>Chat with us in Telegram</b>
 </a>
...

src/telegram.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <defs>
    <linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="99.2583404%">
      <stop offset="0%" stop-color="#2AABEE" />
      <stop offset="100%" stop-color="#229ED9" />
    </linearGradient>
  </defs>
  <circle cx="12" cy="12" r="10" fill="url(#a)" />
  <path fill="#fff" d="M6.527 11.894a490.362 490.362 0 0 1 5.831-2.512c2.777-1.155 3.355-1.355 3.73-1.362.083-.001.268.019.388.116a.421.421 0 0 1 .142.271c.014.078.03.255.017.394-.15 1.581-.802 5.418-1.133 7.19-.14.749-.416 1-.683 1.025-.58.053-1.022-.384-1.584-.753-.88-.577-1.378-.936-2.232-1.499-.987-.65-.347-1.008.215-1.593.148-.153 2.706-2.48 2.756-2.691.006-.026.012-.125-.047-.177-.058-.052-.144-.034-.207-.02-.088.02-1.494.95-4.218 2.788-.399.274-.76.408-1.084.4-.357-.007-1.044-.201-1.555-.367-.626-.204-1.124-.311-1.08-.657.022-.18.27-.364.744-.553z" />
</svg>

output/template.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Output example</title>
</head>
<body>
...
<h2>We are social</h2>
<a href="https://t.me/username">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <defs>
    <linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="99.2583404%">
      <stop offset="0%" stop-color="#2AABEE" />
      <stop offset="100%" stop-color="#229ED9" />
    </linearGradient>
  </defs>
  <circle cx="12" cy="12" r="10" fill="url(#a)" />
  <path fill="#fff" d="M6.527 11.894a490.362 490.362 0 0 1 5.831-2.512c2.777-1.155 3.355-1.355 3.73-1.362.083-.001.268.019.388.116a.421.421 0 0 1 .142.271c.014.078.03.255.017.394-.15 1.581-.802 5.418-1.133 7.19-.14.749-.416 1-.683 1.025-.58.053-1.022-.384-1.584-.753-.88-.577-1.378-.936-2.232-1.499-.987-.65-.347-1.008.215-1.593.148-.153 2.706-2.48 2.756-2.691.006-.026.012-.125-.047-.177-.058-.052-.144-.034-.207-.02-.088.02-1.494.95-4.218 2.788-.399.274-.76.408-1.084.4-.357-.007-1.044-.201-1.555-.367-.626-.204-1.124-.311-1.08-.657.022-.18.27-.364.744-.553z" />
</svg>
 </a>
...
<h2>Chat with us</h2>
<a href="https://t.me/+phone_number">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <defs>
    <linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="99.2583404%">
      <stop offset="0%" stop-color="#2AABEE" />
      <stop offset="100%" stop-color="#229ED9" />
    </linearGradient>
  </defs>
  <circle cx="12" cy="12" r="10" fill="url(#a)" />
  <path fill="#fff" d="M6.527 11.894a490.362 490.362 0 0 1 5.831-2.512c2.777-1.155 3.355-1.355 3.73-1.362.083-.001.268.019.388.116a.421.421 0 0 1 .142.271c.014.078.03.255.017.394-.15 1.581-.802 5.418-1.133 7.19-.14.749-.416 1-.683 1.025-.58.053-1.022-.384-1.584-.753-.88-.577-1.378-.936-2.232-1.499-.987-.65-.347-1.008.215-1.593.148-.153 2.706-2.48 2.756-2.691.006-.026.012-.125-.047-.177-.058-.052-.144-.034-.207-.02-.088.02-1.494.95-4.218 2.788-.399.274-.76.408-1.084.4-.357-.007-1.044-.201-1.555-.367-.626-.204-1.124-.311-1.08-.657.022-.18.27-.364.744-.553z" />
</svg>
 </a>
...
</body>
</html>

Now my output have svg IDs collision. Nu Html Checker says error: Duplicate ID "a"

I can use external SVG files. This should work, the HTML page code will be reduced, and the page loading time will increase slightly.
I try svg-sprite-loader.
Firstly, svg-sprite-loader has not been updated since 2021.
I was able to get the sprite file to generate, but now there is no SVG in the html code, no links to the SVG, the code does not contain the sprite.

I'm trying to resolve inline SVG IDs collision. Are there any working examples of inline SVG sprites for HTML Bundler Plugin?

Answered by webdiscus

Oct 6, 2023

@vralle

this is really a very, very complex issue that has been known for more than 10 years.
But I have a solution.

The HTML Bundler plugin works with standard assets types that Webpack generates using loaders.
All manipulation of SVG content must be done outside of the bundler plugin. This is not a task for the plugin.
Therefore we need the svgo-loader (not svg-sprite-loader) which can handle the SVG content via plugins.
But the svgo has the unresolved issues:

I have extended/fixed the original svgo plugin prefixIds to generate unique IDs for SVG.

Here is the working example inline-svg-unique-id to i…

View full answer

webdiscus · 2023-10-05T19:51:07Z

webdiscus
Oct 5, 2023
Maintainer

Hello @vralle,

Thanks for the interesting use case.
I'll try to reproduce it and find a solution.

0 replies

webdiscus · 2023-10-06T13:31:48Z

webdiscus
Oct 6, 2023
Maintainer

@vralle

this is really a very, very complex issue that has been known for more than 10 years.
But I have a solution.

The HTML Bundler plugin works with standard assets types that Webpack generates using loaders.
All manipulation of SVG content must be done outside of the bundler plugin. This is not a task for the plugin.
Therefore we need the svgo-loader (not svg-sprite-loader) which can handle the SVG content via plugins.
But the svgo has the unresolved issues:

I have extended/fixed the original svgo plugin prefixIds to generate unique IDs for SVG.

Here is the working example inline-svg-unique-id to inline multiple SVG files w/o ID collision.

Note

each unique SVG source file must have an unique URL query to force run svgo-loader, otherwise the loader will be called for first unique SVG file only.

For example:

<img src="./icon.svg?1" />
<img src="./icon.svg?2" />

<img src="./image.svg?1" />
<img src="./image.svg?2" />
...

I understand that this is inconvenient, but it won’t work otherwise.

The webpack config from the inline-svg-unique-id example:

const path = require('path');
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

// the modified original svgo plugin `prefixIds` to generate unique IDs
const svgoPluginUniqueIds = require('./svgo-plugins/uniqueIds');

module.exports = {
  mode: 'production',

  output: {
    path: path.join(__dirname, 'dist/'),
  },

  plugins: [
    new HtmlBundlerPlugin({
      entry: {
        index: './src/index.html',
      },
    }),
  ],

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['css-loader'],
      },
      {
        test: /\.svg$/,
        type: 'asset', // <= important to inline SVG into HTML
        loader: 'svgo-loader',
        options: {
          plugins: [
            {
              name: svgoPluginUniqueIds.name,
              fn: svgoPluginUniqueIds.fn,
              params: {
                // disable prefix as filename
                prefix: false,
                // enable unique ID to avoid ID collision by inline multiple SVG files
                uniqueId: true,
              },
            },
          ],
        },
      },
    ],
  },
};

View in browser

How to use the example

git clone https://github.com/webdiscus/html-bundler-webpack-plugin.git
cd examples/inline-svg-unique-id
npm install
npm start

0 replies

vralle · 2023-10-06T14:55:50Z

vralle
Oct 6, 2023
Author

@webdiscus,

I found another way. CSS.

.i-bg-telegram::before {
  background-image: url("./img/icons/social/telegram.svg");
}

[class*="i-bg-"]::before {
  display: inline-block; /*  */
  width: 1.5em;
  height: 1.5em;
  margin-right: .5rem;
  content: "";
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

Pros:

SVGs have their own scope, No IDs collision
Easy to use, easy to support
Reuse without increasing the code base

There are some difficulties with the fill color, but this can be achieved using the mask property
An example of using masks in UnoCSS

The last thing we can do is find a way to generate SVG sprites

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Inline SVG IDs collision #32

{{title}}

Replies: 3 comments

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Inline SVG IDs collision #32

vralle Oct 5, 2023

Replies: 3 comments

webdiscus Oct 5, 2023 Maintainer

webdiscus Oct 6, 2023 Maintainer

View in browser

How to use the example

vralle Oct 6, 2023 Author

vralle
Oct 5, 2023

webdiscus
Oct 5, 2023
Maintainer

webdiscus
Oct 6, 2023
Maintainer

vralle
Oct 6, 2023
Author