Html Question posted in
Some basic documentation can be found here.

Html – referencing an inline svg by id inside an img src attribute

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>
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0 
    body {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search