I don't understand how to use local svg file

user_11933144 0
Viewed 7896
svg css html
1 Answers

There're different ways you can use SVG into your code. In your particular case, you are trying to use the SVG Sprites method. <use> shape has to be defined ON THE PAGE somewhere else. Also match the xlink:href= and SVG path or symbol id.

There're so many different articles on how to use SVG Sprites.

  1. SVGs as Static Images

    img, object, embed specify the source of your svg file.
    <img 
        src="equilateral.svg" 
        alt="triangle with all three sides equal"
        height="87px"
        width="100px" />

  1. HTML-Inlined SVG Images

    <svg width="300" height="200">
        <rect width="100%" height="100%" fill="green" />
    </svg>

  1. CSS Inlined SVG Backgrounds

 .img { 
   background-image: url(image.svg);
 }

  1. SVG Sprites | SVG with use reference.

Ref.

<!-- SVG element  -->

<svg id="svg-test" style="width:0; height:0;">
  <clipPath id="my-clip-1">
    <circle id="circle-1" cx="50" cy="50" r="50" />
  </clipPath>
  <path id="svg-test-reference" clip-path="url(#my-clip-1)" d="M10-39.288h80v80H10z" />
</svg>

<!-- Reference SVG <path> by ID with Use -->

<svg class="svg-item" viewBox="0 0 100 100">
  <use xlink:href="#svg-test-reference" />
</svg>
user_73315740
Related