Is there a syntax that will allow me to reference an inline svg by id in an img tag's src attribute? Or is it possible to echo the svg code directly into the src attribute? I'd prefer to avoid creating a duplicate file and a duplicate HTTP request, if possible.

For a previously loaded svg with id = #my_svg", I tried: src="url(#my_svg)". I also tried printing the svg directly into the src attribute from the server, like this:

<img src="data:image/svg+xml;utf8,
<?php
$svg_str = logo_svg();
$svg_str = str_replace('"', "'", $svg_str);
echo $svg_str;
?>
" 
style="position:absolute;width:100%;height:100%">
</img>

Is there a syntax that will allow me to reference an inline svg by id in an img tag's src attribute? Or is it possible to echo the svg code directly into the src attribute? I'd prefer to avoid creating a duplicate file and a duplicate HTTP request, if possible.

For a previously loaded svg with id = #my_svg", I tried: src="url(#my_svg)". I also tried printing the svg directly into the src attribute from the server, like this:

<img src="data:image/svg+xml;utf8,
<?php
$svg_str = logo_svg();
$svg_str = str_replace('"', "'", $svg_str);
echo $svg_str;
?>
" 
style="position:absolute;width:100%;height:100%">
</img>

• html
• svg

• 1 Side note, there's no such thing as </img> – j08691 Commented Nov 16, 2024 at 22:20
• 1 images are complete files, you don't refer to them by id. If you want to reference something by id we have a different tag for that i.e. <use> – Robert Longson Commented Nov 17, 2024 at 0:09
• 1 you also need to escape the # characters in a Data-URI – Danny '365CSI' Engelman Commented Nov 17, 2024 at 9:19
• Note: If you load a second IMG with the same src your browser will fetch it from the cache, so there is no duplicate HTTP request – Danny '365CSI' Engelman Commented Nov 17, 2024 at 11:22
• Provided your svg image doesn't contain any ID references (like clip-path, gradients etc) that may collide with other element ID you could just echo the SVG markup directly. So you get a inlined SVG element in your HTML. – herrstrietzel Commented Nov 17, 2024 at 21:33

2 Answers 2

body {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3./2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");

}

An example of gradient created in javascript

If you want to avoid this, you can create an assets folder in your GitHub repository and put the svg you want to use, it works well, because some links only work if they are hosted in specific places sometimes, you can create a folder in github with your icons and images, and when you need to use them, you just use the link to your own repository and adjust the size of the icons