HTMLHelp Forums > HTML - SVG - xlink:href = TOO LONG

JoeJoeJoe

Jan 31 2023, 03:37 AM

Hello everyone !
I have a problem when i convert my sketch into SVG with Figma.
Indeed when i include the svg code in my REACT HTML file, i got this :

CODE

<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_1_2" transform="matrix(0.000824971 0 0 0.000900901 -0.0692298 0)"/>
</pattern>
<image id="image0_1_2" data-name="WBA_transparent.png" width="1380" height="1110" xlink:href="data:image/png;base64,iVBORw0KG....

The problem is that the xlink:href is very long for the raster image, and it s not easy to manipulate in the code

If you have an idea of how can i do, please let me know !

Thank you in advance, have a good day !

Jason Knight

Jan 31 2023, 07:39 AM

Generally speaking it's a bad idea to have SVG in the markup unless you REALLY need to manipulate its values from JavaScript or CSS. Is this something you could move into the CSS via background-image instead?

Likewise with base64's relict encoding increasing the raster image's size by 3/8ths, putting raster images into the markup OR CSS is also not a great idea.

Could you make it a separate file, then link it into the SVG via path, instead of embedding it in the markup where it's telling caching models to suck an egg? Basically instead of that odd "data-" attribute that probably isn't needed...

CODE

<image id="image0_1_2" width="1380" height="1110" xlink:href="images/WBA_transparent.png">'

Or some such. Then at least not being in the markup you don't have the size worry, and it has a chance to be cached.

All that said the hackles on my hackles are being raised by things like Figma (which is not actually a design tool, it's a paint program), React (which is just ... don't get me started). I'd have to see what you're doing, but a lot of big red warning flags are thrown up.

JoeJoeJoe

Jan 31 2023, 10:17 AM

QUOTE(Jason Knight @ Jan 31 2023, 07:39 AM)

Generally speaking it's a bad idea to have SVG in the markup unless you REALLY need to manipulate its values from JavaScript or CSS. Is this something you could move into the CSS via background-image instead?

Likewise with base64's relict encoding increasing the raster image's size by 3/8ths, putting raster images into the markup OR CSS is also not a great idea.

Could you make it a separate file, then link it into the SVG via path, instead of embedding it in the markup where it's telling caching models to suck an egg? Basically instead of that odd "data-" attribute that probably isn't needed...

CODE

<image id="image0_1_2" width="1380" height="1110" xlink:href="images/WBA_transparent.png">'

Or some such. Then at least not being in the markup you don't have the size worry, and it has a chance to be cached.

All that said the hackles on my hackles are being raised by things like Figma (which is not actually a design tool, it's a paint program), React (which is just ... don't get me started). I'd have to see what you're doing, but a lot of big red warning flags are thrown up.

Thank you very much for your answer,
Actually I am trying to play with animations, and i m following the tips of this video : video_youtube.

The guy is using SVG for the animations. That s why i have done it this way.