0

I have an html file that uses inline svg. I use this so I can add classes to my svg and style them with CSS. The following snippet works:

<div>
    <svg class="icon" viewbox="0 0 512 512">
        <path d=" ... "/>
    </svg>
 </div>

Howeever, the tag can be quite long if the svg is complex. I'm currently using this svg in 3 different locations, and everytime I need to copy paste the entire path. It would be better if I could define the path only 1 time, preferabvly in a css class like this:

<div>
    <svg class="icon" viewbox="0 0 512 512">
        <path class="compleximage"/>
    </svg>
 </div>

 .compleximage
 {
      d: ... ;
 }

But this doesn't seem to work. Maybe I'm getting it wrong syntactically, or maybe it can't be done this way. If so, are there ways other to prevent having to copy/paste the svg in my html files? I'm trying to follow the "0,1 or infinite" design pattern, and copy/pasting code 3 times break that.

user1884155
  • 3,616
  • 4
  • 55
  • 108

3 Answers3

2

You can use the use tag to display the path in more than one place. Just give the path an id attribute and then refer to that in the xlink:href of the <use> element.

Something like

<defs>
    <path id="image1" d="..." />
</defs>
<use x="20" y="10" xlink:href="#image1" />
<use x="50" y="50" xlink:href="#image1" />

etc.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • After looking at the documentation, I get the feeling this defs/use tag can only be used to reference the defs inside the SAME svg. I have 3 svg's on different locations inside my html file, and I want all 3 to use the same path. – user1884155 Feb 09 '14 at 09:43
  • You misread the documentation then ;-) Per the specification you can use it over multiple tags. That doesn't account for browser bugs but this definitely works in Firefox. – Robert Longson Feb 09 '14 at 10:02
  • Where do I put the defs? It's not working in this jsfiddle: http://jsfiddle.net/PULxU/ – user1884155 Feb 09 '14 at 10:19
  • You must put the defs in an svg tag so it's in the SVG namespace. You could use one of your existing svg tags or another one. e.g. http://jsfiddle.net/PULxU/2/ – Robert Longson Feb 09 '14 at 10:22
  • Ok thanks, I get how it works now. Is it possible to define the defs on an external file, and then reference that def from other files? Or do I need a defs inside each html file I have that will use an svg? – user1884155 Feb 09 '14 at 10:39
  • You can use an external file per the specification but I don't think that works in Chrome or Safari yet, it would work in Firefox. Best bet is to try it and see as Chrome may work by now. – Robert Longson Feb 09 '14 at 10:42
1

In HTML5 you can do it.

Please try this:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

On the other hand, you can create your own SVG and get it via <img src="" />. Sample below:

<img class="papa" src="http://s.cdpn.io/3/kiwi.svg">

Reference here:

(1) http://css-tricks.com/using-svg/

Another reference here how to change it via css:

(2) http://codepen.io/chriscoyier/pen/evcBu

Allan
  • 630
  • 7
  • 7
  • It is true this lets me import the same .svg multiple times on the same page, but I lose the ability to style my "svg" using css class. The class on the image (in this case 'papa') will not allow me to recolor the kiwi for example. – user1884155 Feb 09 '14 at 09:47
  • If you read carefully the given reference that i gave to you, there's a deep explanation how to use it. I put another reference using css for your perusal. Don't forget to mark my answer if it helps you. – Allan Feb 09 '14 at 09:56
  • If I put an html class attribute INSIDE my .svg file, instead of putting it in my html file, and then import that svg file in my html with , will my browser know it has to interpret the classes inside the .svg file? Or will it just ignore them because the svg (and thus its class attribute) is not part of the actual DOM? – user1884155 Feb 09 '14 at 10:05
  • If your browser support SVG then it will read it. Please read this as your perusal: [SVG Reference](http://www.w3schools.com/svg/svg_examples.asp) – Allan Feb 10 '14 at 04:30
0

You cannot set svg attributes using CSS. You can only set styles like stroke, fill, etc. The only way would be to use javascript to set those paths dynamically. I would recommend jQuery.

this link should be helpful for using jQuery to modify svg files. Modify a svg file using jQuery

Community
  • 1
  • 1
anurupr
  • 2,294
  • 2
  • 20
  • 28