CODEWITHSUNDEEP
htmlcsssvg
Greg Gum
Greg Gum

Reputation: 37909

How to move Inline SVG to css

I have this inline SVG that I got working, and now want to move it to an external file so I can use it in other places.

(It's a simple drag icon.)

https://gist.run/?id=de197c5eb19bc35bf7f537f7aab345a8

How do I do that?

 <svg style="height:16px; width:16px;" focusable="false" viewBox="0 0 32 32"><path d="M14,5.5c0,1.7-1.3,3-3,3s-3-1.3-3-3s1.3-3,3-3S14,3.8,14,5.5z M21,8.5c1.7,0,3-1.3,3-3s-1.3-3-3-3s-3,1.3-3,3S19.3,8.5,21,8.5z M11,12.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S12.7,12.5,11,12.5z M21,12.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S22.7,12.5,21,12.5z M11,22.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S12.7,22.5,11,22.5z M21,22.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S22.7,22.5,21,22.5z"></path></svg>

I am not trying to customize it, just reuse it by putting it in a .css file.

Upvotes: 3

Views: 785

Answers (2)

Vikasdeep Singh
Vikasdeep Singh

Reputation: 21766

You can do it by creating a SVG template and use it at multiple places.

Below is example:

svg {
  width: 40px;
  height: 100px;
}
<!-- SVG template -->
<div style="visibility: hidden; position: absolute; width: 0px; height: 0px;">
  <svg style="height:16px; width:16px;" focusable="false" viewBox="0 0 32 32">
  <symbol viewBox="0 0 18 15" id="sample">
    <path d="M14,5.5c0,1.7-1.3,3-3,3s-3-1.3-3-3s1.3-3,3-3S14,3.8,14,5.5z M21,8.5c1.7,0,3-1.3,3-3s-1.3-3-3-3s-3,1.3-3,3S19.3,8.5,21,8.5z M11,12.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S12.7,12.5,11,12.5z M21,12.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S22.7,12.5,21,12.5z M11,22.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S12.7,22.5,11,22.5z M21,22.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S22.7,22.5,21,22.5z"></path>
    </symbol>
  </svg>
</div>
          


<!-- and use it whenever you want -->
<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sample"></use></svg>

<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sample"></use></svg>

For more information please check this article.

Upvotes: 1

Greg Gum
Greg Gum

Reputation: 37909

Finally got this working by putting the SVG in a file: grip.svg:

 <?xml version="1.0" encoding="utf-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" style="height:16px; width:16px;" focusable="false" viewBox="0 0 32 32">
 <path d="M14,5.5c0,1.7-1.3,3-3,3s-3-1.3-3-3s1.3-3,3-3S14,3.8,14,5.5z M21,8.5c1.7,0,3-1.3,3-3s-1.3-3-3-3s-3,1.3-3,3S19.3,8.5,21,8.5z M11,12.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S12.7,12.5,11,12.5z M21,12.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S22.7,12.5,21,12.5z M11,22.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S12.7,22.5,11,22.5z M21,22.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S22.7,22.5,21,22.5z">
</path>
</svg>

Then used it like this:

 <img style="height:16px;width:16px;" src="/assets/images/grippy.svg" />

Upvotes: 1

Related Questions