The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> HTML - SVG - xlink:href = TOO LONG
JoeJoeJoe
post Jan 31 2023, 03:37 AM
Post #1





Group: Members
Posts: 3
Joined: 31-January 23
Member No.: 28,779



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 ! smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jason Knight
post Jan 31 2023, 07:39 AM
Post #2


Advanced Member
****

Group: Members
Posts: 100
Joined: 25-December 22
Member No.: 28,719



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.

This post has been edited by Jason Knight: Jan 31 2023, 07:42 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JoeJoeJoe
post Jan 31 2023, 10:17 AM
Post #3





Group: Members
Posts: 3
Joined: 31-January 23
Member No.: 28,779



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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 08:00 PM