iconfu/svg-inject

First ID stays the same

JaneMcBrain opened this issue · 8 comments

JaneMcBrain commented

I noticed, that when I use this super nice tool, the first IDs in the SVG is not changed. For example I have this SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 128 128" data-inject-url="http://us.localhost.com:3000/assets/application/home/us-chat-in-development.svg">
  <title>Ribbon - Remove Chat from US Platform</title>
  <defs>
    <circle id="a" cx="64" cy="64" r="64"></circle>
  </defs>
  <g fill="none" fill-rule="evenodd">
    <mask id="b--inject-1" fill="#fff">
      <use xlink:href="#a"></use>
    </mask>
    <use fill="#D7DEE2" xlink:href="#a"></use>
    <circle fill="#82C0D2" mask="url(#b--inject-1)" cx="64" cy="64" r="54"></circle>
    <g mask="url(#b--inject-1)">
      <g transform="translate(36.44 23)">
        <path d="M2.157 48.825a1.94 1.94 0 0 1-.02-2.795l29.24-29.243a12.967 12.967 0 0 1 1.037-8.816c2.767-5.519 8.922-8.235 14.719-6.934l-6.058 6.485a1.984 1.984 0 0 0 .109 2.809l6.945 6.397c.811.747 2.08.698 2.828-.103l5.962-6.38a12.958 12.958 0 0 1-.87 9.408c-2.92 5.824-9.615 8.53-15.678 6.679L11.595 55.1a2.054 2.054 0 0 1-2.853.038l-6.585-6.313z" fill="#555"></path>
        <path d="M1.437 48.11a1.94 1.94 0 0 1-.02-2.795l29.24-29.243a12.967 12.967 0 0 1 1.037-8.816C34.46 1.737 40.616-.98 46.412.32l-6.057 6.485a1.984 1.984 0 0 0 .108 2.81l6.945 6.396c.812.748 2.08.699 2.829-.102l5.961-6.381a12.958 12.958 0 0 1-.87 9.408c-2.919 5.825-9.614 8.53-15.678 6.68L10.874 54.384a2.054 2.054 0 0 1-2.852.038L1.437 48.11z" fill="#D7DEE2"></path>
        <circle fill="#D7DEE2" cx="36.284" cy="16.223" r="2.5"></circle>
        <circle fill="#D7DEE2" cx="41.517" cy="20.685" r="2.5"></circle>
      </g>
      <g fill-rule="nonzero">
        <path fill="#FFF" d="M39.297 39.09l9.745-9.745 33.6 33.599-9.746 9.745z"></path>
        <path fill="#F6D7AA" opacity=".94" d="M35.51 25.762l13.397 3.613-9.703 9.69z"></path>
        <path fill="#555" d="M70.774 70.414l9.745-9.745 4.22 4.22-9.746 9.745z"></path>
        <path d="M74.983 74.592l9.758-9.634 4.852 4.817c.661.657.661 1.697 0 2.3l-7.388 7.335c-.661.657-1.709.657-2.315 0l-4.907-4.818z" fill="#D7DEE2"></path>
        <path d="M36.061 25.543l3.473 1.314-2.866 2.846-1.268-3.448c-.22-.438.22-.876.661-.712z" fill="#555"></path>
      </g>
    </g>
    <path d="M.183 84.805C-.303 83.808.196 83 1.305 83H126.45c1.106 0 1.77.874 1.486 1.941l-5.086 19.118c-.285 1.072-1.416 1.941-2.517 1.941H12.521c-1.105 0-2.393-.805-2.88-1.805L.183 84.805z" fill="#D7DEE2" mask="url(#b--inject-1)"></path>
    <path d="M17 96.894v-7.772h1.27v7.772H17zm9.887 0H25.33L21.508 90.7h-.043l.027.346c.05.659.074 1.261.074 1.807v4.04h-1.153v-7.772h1.542l3.81 6.161h.033a36.05 36.05 0 0 1-.043-.89 30.766 30.766 0 0 1-.032-1.199v-4.072h1.164v7.772zm11.382-3.96c0 1.282-.356 2.263-1.069 2.942-.712.678-1.738 1.018-3.077 1.018h-2.174v-7.772h2.402c1.237 0 2.2.333 2.887 1 .687.666 1.03 1.603 1.03 2.812zm-1.34.042c0-1.86-.87-2.79-2.61-2.79h-1.1v5.64h.904c1.87 0 2.806-.95 2.806-2.85zm7.496 3.918h-4.396v-7.772h4.396v1.074h-3.126v2.116h2.929v1.063h-2.929v2.44h3.126v1.079zm6.198-7.772h1.318l-2.721 7.772h-1.34l-2.71-7.772h1.307l1.621 4.832c.085.23.176.527.271.89.096.364.158.634.186.811.046-.27.117-.581.213-.935.096-.355.174-.617.234-.787l1.621-4.81zm6.831 7.772h-4.396v-7.772h4.396v1.074h-3.126v2.116h2.93v1.063h-2.93v2.44h3.126v1.079zm1.77 0v-7.772h1.27v6.682h3.291v1.09h-4.56zm12.673-3.897c0 1.265-.316 2.249-.949 2.95C70.316 96.65 69.42 97 68.261 97c-1.173 0-2.074-.348-2.703-1.045-.629-.696-.943-1.685-.943-2.968s.316-2.268.949-2.956c.632-.687 1.535-1.031 2.708-1.031 1.155 0 2.048.35 2.679 1.047.63.698.946 1.682.946 2.95zm-5.932 0c0 .957.193 1.683.58 2.177.386.494.958.742 1.716.742.755 0 1.325-.245 1.71-.734.384-.489.576-1.217.576-2.185 0-.953-.19-1.676-.571-2.168-.381-.493-.95-.74-1.704-.74-.762 0-1.337.247-1.725.74-.388.492-.582 1.215-.582 2.168zm12.838-1.525c0 .811-.266 1.433-.798 1.866-.531.432-1.288.648-2.27.648h-.808v2.908h-1.27v-7.772h2.238c.97 0 1.698.199 2.182.596.484.397.726.981.726 1.754zm-3.876 1.446h.676c.652 0 1.13-.114 1.435-.34.305-.227.457-.582.457-1.064 0-.446-.137-.78-.41-.999-.272-.22-.698-.33-1.275-.33h-.883v2.733zm8.878 3.976l-2.254-6.49h-.042c.06.963.09 1.867.09 2.71v3.78h-1.154v-7.772h1.792l2.158 6.182h.032l2.222-6.182h1.796v7.772h-1.222V93.05c0-.386.01-.889.029-1.51.02-.62.036-.995.05-1.126h-.042l-2.334 6.48h-1.121zm11.174 0h-4.396v-7.772h4.396v1.074h-3.126v2.116h2.929v1.063h-2.929v2.44h3.126v1.079zm8.245 0h-1.558L97.844 90.7h-.042l.026.346c.05.659.075 1.261.075 1.807v4.04h-1.154v-7.772h1.542l3.81 6.161h.033a36.044 36.044 0 0 1-.043-.89 30.765 30.765 0 0 1-.032-1.199v-4.072h1.165v7.772zm4.826 0h-1.27v-6.682h-2.286v-1.09h5.842v1.09h-2.286v6.682z" fill="#333" mask="url(#b--inject-1)"></path>
  </g>
</svg>

Here You can see that the id="a" in the circle tag is not touched at all, but the following IDs in the mask tags are changed. I have another example, where all the IDs stay the same:

    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="StarNoGradient" fill-rule="nonzero">
            <polygon id="Combined-Shape-Copy" fill="#E3B500" points="12 0 12 19.9 4.584 24 6 15.317 0 9.167 8.292 7.9"></polygon>
            <polygon id="Combined-Shape-Copy-2" fill="#999999" points="12 0 15.708 7.9 24 9.167 18 15.317 19.416 24 12 19.9"></polygon>
        </g>
    </g>
</svg>

I am wondering now, if this is a tag related problem or if I just miss something here? I am kind of clueless. Also I copied this SVGs from the DOM and in both pages the library is implemented the same way.

waruyama commented

Thanks for the feedback. Can you provide the original SVG(s) for this issue? From the injected SVG it looks like everything should work (but oviously it doesn't), so I want to make sure that there isn't anything special with the original file.

JaneMcBrain commented

Yeah sure!

SVG one:

<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Ribbon - Remove Chat from US Platform</title><defs><circle id="a" cx="64" cy="64" r="64"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#D7DEE2" xlink:href="#a"/><circle fill="#82C0D2" mask="url(#b)" cx="64" cy="64" r="54"/><g mask="url(#b)"><g transform="translate(36.44 23)"><path d="M2.157 48.825a1.94 1.94 0 0 1-.02-2.795l29.24-29.243a12.967 12.967 0 0 1 1.037-8.816c2.767-5.519 8.922-8.235 14.719-6.934l-6.058 6.485a1.984 1.984 0 0 0 .109 2.809l6.945 6.397c.811.747 2.08.698 2.828-.103l5.962-6.38a12.958 12.958 0 0 1-.87 9.408c-2.92 5.824-9.615 8.53-15.678 6.679L11.595 55.1a2.054 2.054 0 0 1-2.853.038l-6.585-6.313z" fill="#555"/><path d="M1.437 48.11a1.94 1.94 0 0 1-.02-2.795l29.24-29.243a12.967 12.967 0 0 1 1.037-8.816C34.46 1.737 40.616-.98 46.412.32l-6.057 6.485a1.984 1.984 0 0 0 .108 2.81l6.945 6.396c.812.748 2.08.699 2.829-.102l5.961-6.381a12.958 12.958 0 0 1-.87 9.408c-2.919 5.825-9.614 8.53-15.678 6.68L10.874 54.384a2.054 2.054 0 0 1-2.852.038L1.437 48.11z" fill="#D7DEE2"/><circle fill="#D7DEE2" cx="36.284" cy="16.223" r="2.5"/><circle fill="#D7DEE2" cx="41.517" cy="20.685" r="2.5"/></g><g fill-rule="nonzero"><path fill="#FFF" d="M39.297 39.09l9.745-9.745 33.6 33.599-9.746 9.745z"/><path fill="#F6D7AA" opacity=".94" d="M35.51 25.762l13.397 3.613-9.703 9.69z"/><path fill="#555" d="M70.774 70.414l9.745-9.745 4.22 4.22-9.746 9.745z"/><path d="M74.983 74.592l9.758-9.634 4.852 4.817c.661.657.661 1.697 0 2.3l-7.388 7.335c-.661.657-1.709.657-2.315 0l-4.907-4.818z" fill="#D7DEE2"/><path d="M36.061 25.543l3.473 1.314-2.866 2.846-1.268-3.448c-.22-.438.22-.876.661-.712z" fill="#555"/></g></g><path d="M.183 84.805C-.303 83.808.196 83 1.305 83H126.45c1.106 0 1.77.874 1.486 1.941l-5.086 19.118c-.285 1.072-1.416 1.941-2.517 1.941H12.521c-1.105 0-2.393-.805-2.88-1.805L.183 84.805z" fill="#D7DEE2" mask="url(#b)"/><path d="M17 96.894v-7.772h1.27v7.772H17zm9.887 0H25.33L21.508 90.7h-.043l.027.346c.05.659.074 1.261.074 1.807v4.04h-1.153v-7.772h1.542l3.81 6.161h.033a36.05 36.05 0 0 1-.043-.89 30.766 30.766 0 0 1-.032-1.199v-4.072h1.164v7.772zm11.382-3.96c0 1.282-.356 2.263-1.069 2.942-.712.678-1.738 1.018-3.077 1.018h-2.174v-7.772h2.402c1.237 0 2.2.333 2.887 1 .687.666 1.03 1.603 1.03 2.812zm-1.34.042c0-1.86-.87-2.79-2.61-2.79h-1.1v5.64h.904c1.87 0 2.806-.95 2.806-2.85zm7.496 3.918h-4.396v-7.772h4.396v1.074h-3.126v2.116h2.929v1.063h-2.929v2.44h3.126v1.079zm6.198-7.772h1.318l-2.721 7.772h-1.34l-2.71-7.772h1.307l1.621 4.832c.085.23.176.527.271.89.096.364.158.634.186.811.046-.27.117-.581.213-.935.096-.355.174-.617.234-.787l1.621-4.81zm6.831 7.772h-4.396v-7.772h4.396v1.074h-3.126v2.116h2.93v1.063h-2.93v2.44h3.126v1.079zm1.77 0v-7.772h1.27v6.682h3.291v1.09h-4.56zm12.673-3.897c0 1.265-.316 2.249-.949 2.95C70.316 96.65 69.42 97 68.261 97c-1.173 0-2.074-.348-2.703-1.045-.629-.696-.943-1.685-.943-2.968s.316-2.268.949-2.956c.632-.687 1.535-1.031 2.708-1.031 1.155 0 2.048.35 2.679 1.047.63.698.946 1.682.946 2.95zm-5.932 0c0 .957.193 1.683.58 2.177.386.494.958.742 1.716.742.755 0 1.325-.245 1.71-.734.384-.489.576-1.217.576-2.185 0-.953-.19-1.676-.571-2.168-.381-.493-.95-.74-1.704-.74-.762 0-1.337.247-1.725.74-.388.492-.582 1.215-.582 2.168zm12.838-1.525c0 .811-.266 1.433-.798 1.866-.531.432-1.288.648-2.27.648h-.808v2.908h-1.27v-7.772h2.238c.97 0 1.698.199 2.182.596.484.397.726.981.726 1.754zm-3.876 1.446h.676c.652 0 1.13-.114 1.435-.34.305-.227.457-.582.457-1.064 0-.446-.137-.78-.41-.999-.272-.22-.698-.33-1.275-.33h-.883v2.733zm8.878 3.976l-2.254-6.49h-.042c.06.963.09 1.867.09 2.71v3.78h-1.154v-7.772h1.792l2.158 6.182h.032l2.222-6.182h1.796v7.772h-1.222V93.05c0-.386.01-.889.029-1.51.02-.62.036-.995.05-1.126h-.042l-2.334 6.48h-1.121zm11.174 0h-4.396v-7.772h4.396v1.074h-3.126v2.116h2.929v1.063h-2.929v2.44h3.126v1.079zm8.245 0h-1.558L97.844 90.7h-.042l.026.346c.05.659.075 1.261.075 1.807v4.04h-1.154v-7.772h1.542l3.81 6.161h.033a36.044 36.044 0 0 1-.043-.89 30.765 30.765 0 0 1-.032-1.199v-4.072h1.165v7.772zm4.826 0h-1.27v-6.682h-2.286v-1.09h5.842v1.09h-2.286v6.682z" fill="#333" mask="url(#b)"/></g></svg>

Here the second SVG

<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="StarNoGradient" fill-rule="nonzero">
            <polygon id="Combined-Shape-Copy" fill="#E3B500" points="12 0 12 19.9 4.584 24 6 15.317 0 9.167 8.292 7.9"></polygon>
            <polygon id="Combined-Shape-Copy-2" fill="#999999" points="12 0 15.708 7.9 24 9.167 18 15.317 19.416 24 12 19.9"></polygon>
        </g>
    </g>
</svg>

Thx for your quick reply!

JaneMcBrain commented

The second SVG starts with <?xml version="1.0" encoding="UTF-8"?> somehow this code view doesn't show it 🤷‍♀️

waruyama commented

The good news is that there is nothing wrong with your SVGs :)

There are two reasons why the IDs are not converted:

  1. In the second SVG the ID is never referenced internally. The idea behind this is that only those IDs should me made unique that are actually referenced. Other Ids will stay unchanged, so they can be referenced from outside. This whole approach probably causes more harm than good, therefore we will probably convert all IDs in the next version.
  2. The <use element is not treated correctly. This is simply a shortcoming in the current version, but this will not be an issue anymore if the make all IDs unique as described in (1.).

Final question: Until when do you need a solution?

JaneMcBrain commented

That totally makes sense to me! Maybe I will just kick out the ids, which are not referenced and then it should be fine.
Thank you for your quick support!

JaneMcBrain commented

Oh I just noticed, that this id="a" in the first SVG is actually referenced, now I see this problem with the <use element. When do you think you can fix this?

waruyama commented

I guess there will be a new version next week that will fix this.

waruyama commented

This has been fixed in version 1.2.3. We decided to convert all IDs in the SVG by default. If you need any other functionality (for example to preserve certain IDs), please open a new issue.