0

I import 3/4 SVG into a next.js page and the display doesn't work. Seems the ID are in conflict...

I tried to change the mask IDs and differents exports from sketch, it works in svgomg viewer but not in page. I also tried some components from community without success and edit my babelrc/webpack config.

My background :

<svg viewBox="0 0 1440 850" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b">
      <stop stop-color="#151B4A" offset="0%"/>
      <stop stop-color="#464D89" offset="100%"/>
    </linearGradient>
    <path d="M3 0h1434a3 3 0 0 1 3 3v844a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3z" id="a"/>
  </defs>
  <g fill="none" fill-rule="evenodd">
    <mask id="c" fill="#fff">
      <use xlink:href="#a"/>
    </mask>
    <use fill="url(#b)" xlink:href="#a"/>
    <g mask="url(#c)" fill="#FFF">
      <path d="M78 197h112c6.627 0 12 5.373 12 12s-5.373 12-12 12H78c-6.627 0-12-5.373-12-12s5.373-12 12-12z" opacity=".089"/>
      <path d="M141 729h25a7 7 0 0 1 0 14h-25a7 7 0 0 1 0-14z" opacity=".039"/>
      <path d="M1329 129h68c5.523 0 10 4.477 10 10s-4.477 10-10 10h-68c-5.523 0-10-4.477-10-10s4.477-10 10-10z" opacity=".114"/>
      <path d="M758 282h122a7 7 0 0 1 0 14H758a7 7 0 0 1 0-14zM910 195h17a7 7 0 0 1 0 14h-17a7 7 0 0 1 0-14z" opacity=".046"/>
      <path d="M209 164h49a7 7 0 0 1 0 14h-49a7 7 0 0 1 0-14zM438 653h49a7 7 0 0 1 0 14h-49a7 7 0 0 1 0-14z" opacity=".043"/>
    </g>
  </g>
</svg>

My Mountain :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1440 288">
  <defs>
    <linearGradient id="b" x1="65.162%" x2="65.162%" y1="0%" y2="100%">
      <stop offset="0%" stop-color="#A7A7EE" stop-opacity="0"/>
      <stop offset="100%" stop-color="#464D89" stop-opacity=".3"/>
    </linearGradient>
    <path id="a" d="M1 346.117c117.633 2.5 275.882-64.626 474.749-201.377C672.352 8.138 875.369-31.718 1084.802 25.172L1419 859H1V346.117z"/>
    <linearGradient id="c" x1="50%" x2="50%" y1="0%" y2="100%">
      <stop offset="0%" stop-color="#464D89"/>
      <stop offset="100%" stop-color="#5D66B2" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="e" x1="50%" x2="50%" y1="0%" y2="100%">
      <stop offset="0%" stop-color="#464D89" stop-opacity="0"/>
      <stop offset="100%" stop-opacity=".2"/>
    </linearGradient>
    <path id="d" d="M0 530.431c206.555 106.394 407.377 75.963 602.468-91.294 185.657-159.17 518.841-79.615 556.826-141.272 37.985-61.657-339.182-167.515-339.182-209.904 0-28.26 87.65-49.246 262.949-62.961L1957 312.948V861H0V530.431z"/>
  </defs>
  <g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 1874 0)">
    <use fill="#5B64B0" xlink:href="#a"/>
    <use fill="url(#b)" xlink:href="#a"/>
    <path fill="url(#c)" d="M1 424.156c200.18 36.139 417.272-46.015 651.274-246.462s436.545-174.087 607.629 79.08v363.587H1V424.156z"/>
    <use fill="#464D89" xlink:href="#d"/>
    <use fill="url(#e)" xlink:href="#d"/>
  </g>
</svg>

My components imported:

<Stars preserveAspectRatio="xMinYMin meet" className="error404__stars" />
<Mountains preserveAspectRatio="xMidYMax meet" className="error404__mountain" />

One rectangle isn't supposed to appear and the mountain should be full with good display. I have this problem in many SVG of my React app. I don't know how to encapsulate my SVG the best way and I need the preserve aspect ratio property.

MrGlox
  • 26
  • 5
  • A basic rule is you cant have two elements with the same ID on the same page. I think you nailed your problem when you said "Seems the ID are in conflict". Make them unique for each svg. – Ted Jan 18 '19 at 15:19
  • I have to many SVG and everything is generated from sketch. I'm looking for a solution with SVG sprites which are encapsulated in shadow-root (closed). I hope it will clear this issue. I edit my webpack config without success already. – MrGlox Jan 18 '19 at 16:27
  • The basic idea of sprites is to pack multiple images together in one file. If you do that with your SVGs, you are back to square one: the ids will clash in your sprite file. Is there a reason why you don't use your SVGs as ``? If you want automatic resizing and preserveAspectRatio functionaily, CSS [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) is a functional equivalent. – ccprog Jan 19 '19 at 17:14
  • I used the component import method from babel, it was really interesting but I though it was too bad to have a conflit of IDs and I don't understand why svg sprites aren't woking in React. I forgot the object property worked this way, I'll try. Thanks ! – MrGlox Jan 19 '19 at 17:34

0 Answers0