search

mediamonks / muban

A backend-agnostic framework to enhance server-rendered HTML using a modern webpack development setup.
https://mediamonks.github.io/muban/
39 stars 15 forks source link

Enable prefixIDs svgo plugin #130

Open leroykorterink opened 4 years ago

leroykorterink commented 4 years ago

The cleanupIDs plugin in svgo minifies IDs, it does this for each file. The scope for inline svg elements is the document in which they're placed, this means that the id attribute value should be unique to make sure that the correct svg definition is used.

When two svg files have id attributes the values will collide, invalid HTML is generated when both files are inlined. This can cause issues in the svg files that have references to the definitions because it might reference the incorrect element.

Example with colliding IDs chrome_O3TsgIrtOu

With the prefixIds plugin this is fixed because the id attribute value is prefixed with the svg filename chrome_qONm6vA5Wc

Difference in output

<!-- Output without prefixIds -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
  <defs>
    <linearGradient id="a" x1=".667" x2=".417" y1=".167" y2=".75">
      <stop offset="0" stop-color="#37aee2"></stop>
      <stop offset="1" stop-color="#1e96c8"></stop>
    </linearGradient>
    <linearGradient id="b" x1=".66" x2=".851" y1=".437" y2=".802">
      <stop offset="0" stop-color="#eff7fc"></stop>
      <stop offset="1" stop-color="#fff"></stop>
    </linearGradient>
  </defs>
  <circle cx="120" cy="120" r="120" fill="url(#a)"></circle>
  <path fill="url(#b)" d="M98 175c-3.888 0-3.227-1.468-4.568-5.17L82 132.207 170 80"></path>
</svg>

<!-- Output with prefixIds  -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
  <defs>
    <linearGradient id="my-file_svg__a" x1=".667" x2=".417" y1=".167" y2=".75">
      <stop offset="0" stop-color="#37aee2"></stop>
      <stop offset="1" stop-color="#1e96c8"></stop>
    </linearGradient>
    <linearGradient id="my-file_svg__b" x1=".66" x2=".851" y1=".437" y2=".802">
      <stop offset="0" stop-color="#eff7fc"></stop>
      <stop offset="1" stop-color="#fff"></stop>
    </linearGradient>
  </defs>
  <circle cx="120" cy="120" r="120" fill="url(#my-file_svg__a)"></circle>
  <path fill="url(#my-file_svg__b)" d="M98 175c-3.888 0-3.227-1.468-4.568-5.17L82 132.207 170 80"></path>
</svg>