Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Svg

Link Svg Paths From External File To Be Displayed In Html

Post a Comment
I have a bunch of svg paths (for icons) which work fine if they are placed directly in the html. But with so many, I want to put them into an external file instead. I cant use obje

Solution 1:

You can use the filename in front of the id reference. Like here I'm referring to the symbol s2 in the file symbols.svg:

<!DOCTYPE html>
<html>
  <head>
    <title>SVG symbol</title>
  </head>
  <body>
    <h1>Test</h1>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
      <use href="symbols.svg#s2" />
    </svg>
  </body>
</html>

Post a Comment for "Link Svg Paths From External File To Be Displayed In Html"