I have been experimenting with SVG paths which I use for CSS clipping. I finally got the hang of it. I make some graphic with Adobe Illustrator, then I put the SVG in the HTML with width and height of 0 and wrap the path with <clipPath> and assign it an ID to use in the clip-path property. My question is: where should I store all my SVGs so I can assign them some IDs. Putting them in the HTML doesn't seem like a good practice, especially if I have to use more than one. I haven't been able to externally load them with all the markup.
Asked
Active
Viewed 968 times
0
MartiParti
- 1
- 1
-
Anywhere you want. – Robert Longson Aug 05 '18 at 22:13
-
@RobertLongson Hey, firstly, thank you. I was reading another question related to SVGs and your comment there helped me get it. Secondly, putting SVGs randomly in HTML seems a bit ugly to me, but hey, whatever works – MartiParti Aug 05 '18 at 22:29
-
Just note that you can't try to hide the SVG with `display: none`, otherwise its `clipPath`s will be invisible. – BallpointBen Feb 06 '23 at 05:24
1 Answers
0
I've heard some devs place elements in a <div id="ninja" hidden></div> element. This is for those elements that you want on the page but don't want to be rendered.
You can also use AJAX to download svg files when needed/later and embed it onto the page if you feel that it bloats up your HTML file size.
I haven't used svg clip-paths, even though I have read about them. But if you use svg files only for clip path functionality, then you can save the clip path code in an xml file, ajax request it, and, with a bit of verbose javascript, dynamically load it onto the page (Stackoverflow Question on how to do what I just said).
And for the fun of it, check out svgjs.dev
wout
- 2,477
- 2
- 21
- 32
Kitanga Nday
- 3,517
- 2
- 17
- 29