I’m not saying they’re hard to work with because they’re really not. But can’t we have the option to just insert an SVG from a file saved in our workspace?
Something like…
<svg src="icon.svg" fill="pink"></svg>
Why do I have to copy the entire SVG code into the document if I already have the file that holds the code? I know I can just add it as an image, but then I lose almost every benefit of using an SVG in the first place.
Am I missing something here
You mean:
<svg>
<use href="..."/></svg>
?
Daryl said:
You mean:
<svg>
<use href="..."/></svg>
?
Even that is a hassle to get right, especially with large or complex SVGs.
Daryl said:
You mean:
<svg>
<use href="..."/></svg>
?
Even that is a hassle to get right, especially with large or complex SVGs.
If you’re using this for those big complex SVGs, then you might be approaching it wrong.
<use> and <symbol> are usually pretty easy to work with, especially with templates.
And hey, you can’t expect to keep control without things like just adding attributes like fill. Expecting otherwise is like wanting to have it both ways.
Actually, you can do it, but that comes with limits on what you can do with it.
Examples:
@Abi
Right, that’s my point. You can do all those things, but you lose the ability to style it like an SVG. The only way to really control it is to paste the SVG code itself.
I just don’t get why it couldn’t be treated like CSS or JS where you can just reference the file that contains the code instead of writing it all directly in the document.
@Han
SVG has its own DOM and styling options through defs. It’s more like an iframe than a part of the webpage itself.
@Han
If you want to know why you can’t change an SVG file imported like this, it’s because there are no classes built into the SVG file for that purpose. It’s not part of the standard. If you put them inline, then you can add your own classes using CSS.
@Abi
That’s not completely true. You don’t need classes for an inline SVG to be affected; any selector will work without modifying the original SVG. Classes are part of the SVG standard, and even if they were included originally, you still couldn’t manipulate the SVG unless it’s inline.
@Han
Most web pages are dynamically generated, right?
You’re just pulling content from some source and including it.
You don’t have to manually copy and paste, do you?
Remy said:
@Han
Can you use CSS variables with the SVG but define them elsewhere?
Yes, like fill=‘var(–set-somewhere-else)’
@Han
It seems like your point is that you don’t really understand how SVGs work.
How is copying SVG code a burden in the first place?
There are plenty of ways to achieve what you want.
<?php include("img.svg"); ?> <?php echo file_get_contents("img.svg"); ?>
There are plenty of ways to achieve what you want.
file_get_contents throws security errors often; I’ve encountered issues with that when trying to use it.
<?php include("img.svg"); ?> <?php echo file_get_contents("img.svg"); ?>
There are plenty of ways to achieve what you want.
The issue here is that it won’t be cached on the client side. Each time the page is opened, it’ll be retrieved again.
@Dez
Not in the way they’re handling it. That’s PHP. To the browser, what it returns is just the SVG within the HTML. If it was pulled in with JS, that’d be different, but that’s not the case here.
<?php include("img.svg"); ?> <?php echo file_get_contents("img.svg"); ?>
There are plenty of ways to achieve what you want.
I’m not sure why someone disagreed with your comment. This PHP solution works for me as well.