svgs aren't responsive as i thought
so i 've put the svgs seperately in their own files and use them as images, the issue is when i hover even out of bounds of the images i still keep getting the url (check bottom left)
i don't know how to deal with this issue
should i take the svgs and implement them directly in the dom
11 Replies
yes using <img src=".svg"> you have basically used any other img
to use the power of <svg> it needs to be in <svg> and or + <use>
I suggest looking up the different ways to use sprite sheets with svg too
you will learn <use>
yeah i tried to fiddle with it i copy pasted the svg code into the dom but no use, it either looks weird when i try to modify in it
without code its hard to help
okay what would you need me to provide
Scale of a svg in a <img> would still work either way too I just believe you should learn how to use them.
minimal example of your issue
the thing is i used codesandbox last time & it couldn't load the website; it lagged or something,
i'll need to learn svg to do it right i guess
the thing is i don't know how to modify it like should i modify the paths or something or how is it done
you shouldn't need to modify the pths
I mean it #depends again
https://icones.js.org/
I use this site and just bag what I want. Save as sprite and <use> the crap out icons.
If you are using a good source there shouldn't be much too it.
If I'm making custom SVG's then I'm just exporting them from a design tool (like figma) and modify the viewbox if needed but again you are the one building them so you can make it proper.
An Overview Of SVG Sprite Creation Techniques
– The personal website of Sara Soueidan, inclusive design engineer
Sara is amazing resource to start with.
i'm not needing a sprite for now;
i need to modify the svg & it's viewbox or whatever to make it start from 0 0 oof the screen
again without code and seeing how you are trying to make them responsive I have no clue
screen shots do nothing 😄
but also yes all those should be in one file.svg as a sprite imo 😄
it allows for one asset request for one. and cleaner code when you want to use them for two.
You also get more control that way vs using <img> not just viewbox but also fill/strokes you can change on hovers like lots of power in learnin it
https://github.com/b1mind/bfolio/blob/dev/src/lib/component/SocialIcons.svelte
I wouldn't use that maybe I forget if its getting cached with vite.. cause I'm not importing it probalby not
but good basic example