To expand on [Tobias Snoad's answer][1], picking up the pen with the **Move** command and drawing a second shape *in the opposite direction* (as [Brian Hempel pointed out][2]), will remove that section from the original path.  This is due to the [`fill-rule:evenodd`][11] (default) as explained in [this answer][12].

Here's an example that will draw a 10x10 box and then reverse a 6x6 box inside it:



    <svg xmlns="http://wwww3org/2000/svg" height="200" viewBox="0,0,10,10">
      <path d="M 0,0 h 10 v 10 h -10 z
               M 2,2 v  6 h  6 v  -6 z" /> 
    </svg>

Which will produce the second box in the image below, with each point numbered and arrowed so you can see direction:

[![Path Orientation][3]][3]

### Here's a running demo is Stack Snippets 





    svg path.shape {
      fill: green;
      stroke: #1b1b1b;
      stroke-width: .5px;
    }
    svg path.arrow {
      fill: yellow;
      stroke: black;
      stroke-width: .1px;
    }
    svg text {
      font-size: .8px;
      font-family: monospace;
      stroke: navy;
      stroke-width: .1px;
      text-anchor: middle;
      alignment-baseline: middle;
    }
    svg circle {
      r: .5;
      stroke: navy;
      stroke-width: .1px;
      fill: yellow;
    }



    <svg xmlns="http://wwww3org/2000/svg" height="200" viewBox="-2,-2,14,14">

      <defs>
        <marker id='arrow' orient="auto"  
              refX='-.9' refY='1'
              markerWidth='2' markerHeight='2' >
          
          <path d='M 0,0 V 2 L 1,1 Z' class="arrow"/>
        </marker>
      </defs>    

      <path d="M 0,0 h 10 v 10 h -10 z
               M 2,2 h  6 v  6 h  -6 z"  
            marker-mid='url(#arrow)' class="shape" />
                                 
        <circle cx="0" cy="0" />                  
        <text    x="0"  y="0" > 1</text>    
        <circle cx="10" cy="0" />                  
        <text    x="10"  y="0" > 2</text>  
        <circle cx="10" cy="10" />                  
        <text    x="10"  y="10" > 3</text>  
        <circle cx="0" cy="10" />                  
        <text    x="0"  y="10" > 4</text>  
        <circle cx="2" cy="2" />                  
        <text    x="2"  y="2" > 5</text>  
        <circle cx="8" cy="2" />                  
        <text    x="8"  y="2" > 6</text>  
        <circle cx="8" cy="8" />                  
        <text    x="8"  y="8" > 7</text>  
        <circle cx="2" cy="8" />                  
        <text    x="2"  y="8" > 8</text>  
    </svg>

    <svg xmlns="http://wwww3org/2000/svg" height="200" viewBox="-2,-2,14,14">
     
      <path d="M 0,0 h 10 v 10 h -10 z
               M 2,2 v  6 h  6 v  -6 z" 
            marker-mid='url(#arrow)' class="shape" /> 
       
        <circle cx="0" cy="0" />                  
        <text    x="0"  y="0" > 1</text>    
        <circle cx="10" cy="0" />                  
        <text    x="10"  y="0" > 2</text>  
        <circle cx="10" cy="10" />                  
        <text    x="10"  y="10" > 3</text>  
        <circle cx="0" cy="10" />                  
        <text    x="0"  y="10" > 4</text>  
        <circle cx="2" cy="2" />                  
        <text    x="2"  y="2" > 5</text>  
        <circle cx="2" cy="8" />                  
        <text    x="2"  y="8" > 6</text>      
        <circle cx="8" cy="8" />                  
        <text    x="8"  y="8" > 7</text>  
        <circle cx="8" cy="2" />                  
        <text    x="8"  y="2" > 8</text>  
    </svg>




### SVG Path Command Refresher 

**Two Variations**:

* `M 100,150` Uppercase (**Absolute**) - Move to *exact coordinates* `100,150` (*x,y*)
* `m 100,150` Lowercase (**Relative**) - Move the pen `100` down and `150` right of where you are

**Straight Commands**:

* <code>M <i>x,y</i></code> - Pick the pen up and **M**ove it to the point *`x,y`*
* <code>L <i>x,y</i></code> - Draw a straight **L**ine to the point *`x,y`*
* <code>H <i>x</i></code> - Draw a line **H**orizontally to the right by *`x`*
* <code>V <i>y</i></code> - Draw a line **V**ertically down by *`y`* 
* `Z|z` - Closes the path by drawing a straight line back to the start (last M location)  
  **NOTE**: `Z` is *completely optional* - it's just a shortcut to get back to the starting point

**Curved Commands**:

* <code>C <i>cX1,cY1 cX2,cY2 eX,eY</i></code> - Draw a Bezier **C**urve based on *Two* bezier controls point and end at the coordinates *`eX,eY`*
* <code>S <i>cX2,cY2 eX,eY</i></code> - Draw a **S**implifed Curve based on the previous `S|C` control point and *One* specified bezier control point and end at the coordinates *`eX,eY`*
* <code>Q <i>cX2,cY2 eX,eY</i></code> - Draw a **Q**uadratic Curve based on *One* bezier control point and end at the coordinates *`eX,eY`*
* <code>T <i>eX,eY</i></code> - Draw a **T**erminal Quadratic Curve based on the previous bezier control point and end at the coordinates *`eX,eY`*
* <code>A <i>rX,rY rotation, arc, sweep, eX,eY</i></code> - Draw an Elliptical **A**rc for an oval with the specified width *`rX`* and height *`rY`*.  Define the *`rotation`* with degrees and direction with 0|1 for *`arc`* and *`sweep`* and end at the coordinates *`eX,eY`*

> **TIP**: In most instances you can simplify the precision of any automatically generated path points without sacrificing any human discernibility, even when scaled heavily. You can do a regex [find **`([0-9]*)(\.[0-9]*)`** and replace with **`$1`**][6] to remove any trailing decimals.  You can also format each command on it's own line with [find **`\s*([a-zA-z])\s*`** and replace with **`\n$1 `** ][7].

### Further Reading:

* [MDN - SVG Tutorial Paths][4]
* [The SVG `path` Syntax: An Illustrated Guide][5]
* [How to place arrow head triangles on SVG lines?][8]
* [How To Create SVG Arrowheads and Polymarkers][9]
* [SVG center text in circle][10]



  [1]: https://stackoverflow.com/a/14575057/1366033
  [2]: https://stackoverflow.com/questions/3560835/cut-out-one-svg-path-out-of-another-one#comment53137682_14575057
  [3]: https://i.stack.imgur.com/pXu8G.png
  [4]: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
  [5]: https://css-tricks.com/svg-path-syntax-illustrated-guide/
  [6]: https://regexr.com/3iu1s
  [7]: https://regexr.com/3n9g0
  [8]: https://stackoverflow.com/q/11808860/1366033
  [9]: https://vanseodesign.com/web-design/svg-markers/
  [10]: https://stackoverflow.com/q/28128491/1366033
[11]: https://www.w3.org/TR/SVG/images/painting/fillrule-evenodd.svg
[12]: https://stackoverflow.com/a/7716523/1366033

I have several SVG paths looking like this:

    M204.21121687607624,196.94037184487675L329.92080751248244,195.46306542867487A130,130,0,0,0,244.46261863233696,77.83995929783192Z
    M198.39145828733604,195.04941765207442L235.83285625620988,75.03597952801854A130,130,0,0,0,97.55860203112616,119.9640082076644Z

I now want to add another path, but, instead of adding it to the shape, cut it out from the previous paths. How can I accomplish this?

I couldn't find any information on this in the SVG docs - thanks for your help!

Cut out one SVG <path> out of another one

Rather than toggling back and forth between two different static [`set`][1] elements, you can use a single [`animate`][2] that switch between hidden and visible indefinitely.  

Then you also don't need to worry about wiring up the begin timing with the end event of another named animation






    <svg xmlns="http://www.w3.org/2000/svg">
      <circle fill="red" cx="50%" cy="50%" r="30" stroke="black">
        <animate attributeType="CSS"
                 attributeName="visibility"
                 from="visible" 
                 to="hidden"
                 dur="1s"
                 repeatCount="indefinite"/>
      </circle>
    </svg>



[1]: http://www.w3.org/TR/2001/REC-smil-animation-20010904/#setElement
[2]: http://www.w3.org/TR/2001/REC-smil-animation-20010904/#animateElement

I have:

    <set attributeName="visibility" attributeType="CSS" to="visible" begin="5s" fill="freeze"/>
    <set attributeName="visibility" attributeType="CSS" to="hidden" begin="10s" fill="freeze"/>

I want the loop to perform these instructions.

The ‘set’ element - loop

@Ian's answer is unfortunately incorrect, although his fiddle silently fixed the actual issue.

The problem is that you have used [`Snap.select`][1] instead of [`Snap.selectAll`][2] to query for multiple elements.  Select will only ever bring back the first instance that satisfies the selector, whereas selectAll will grab all of them and return as a set or array of Element objects.  That's why  only a single element was responding to the animation.

Further, you definitely can call `animate` on a set of elements simultaneous, so there's no need to complicate things with an additional for loop.

From the docs on [`Set.animate()`][3]: 

> Animates each element in set in sync.

###Here's a working demo using Stack Snippets. 

It starts by logging the different outputs of select and SelectAll







    console.log("select:    ", Snap.select(   '#rect-1, #rect-2, #rect-3'));
    console.log("selectAll: ", Snap.selectAll('#rect-1, #rect-2, #rect-3'));

    var grabLink = Snap.select('#one'),
        grabPathRectangles = Snap.selectAll('#rect-1, #rect-2, #rect-3');

    function colorPathRectangles(){
      grabPathRectangles.animate({fill: 'red'}, 1000, mina.ease);
    } 
    function resumePathRectangles(){
      grabPathRectangles.animate({fill: 'green'}, 1000, mina.ease);
    }   

    grabLink.hover(colorPathRectangles, resumePathRectangles);  




    a#one {
      display: block;
      border: 1px solid blue;
      margin-bottom: 15px;
    }



    <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>

    <a id="one">Hover Me</a>

    <svg>
      <rect id="rect-1" fill="#231F20" width="39" height="14"/>
      <rect id="rect-2" fill="#231F20" width="39" height="14" x="54" />
      <rect id="rect-3" fill="#231F20" width="39" height="14" x="104" />
    </svg>




[1]: http://snapsvg.io/docs/#Snap.select
[2]: http://snapsvg.io/docs/#Snap.selectAll
[3]: http://snapsvg.io/docs/#Set.animate

**Background**: I'm using snap.svg to animate paths in an inline svg, and I'm trying to animate several paths in one function.

**Problem**: using the code below, I'm only able to select a single path in one grab function. In the code below, I've used multiple selectors, but the animation only affects rect#rect-one. How can I select multiple paths in Snap.svg? 

Thanks for the help!

**HTML/Inline SVG**:

    <a id="one">link</a>

    <svg>
    <rect  id="rect-one" fill="#231F20" width="39" height="14"/>
    <rect id="rect-two" x="54" fill="#231F20" width="39" height="14"/>
    <rect id="rect-three" x="104" fill="#231F20" width="39" height="14"/>
    </svg>

**Snap**:

    window.onload = function () {
    	var grabLink = Snap.select('body a#one'),
            grabPathRectangles = Snap.select('#rect-one, #rect-two, #rect-three');
            
        function colorPathRectangles(){
            grabPathRectangles.animate({fill: 'red'}, 100, mina.ease);
    	} 
        function resumePathRectangles(){
    	    grabPathRectangles.animate({fill: 'green'}, 100, mina.ease);
    	}  	
        grabLink.hover(colorPathRectangles, resumePathRectangles);	
    };

Select multiple paths with Snap.svg

One solution is to group the `circle` and `text`.





    .shape:hover .circ {
      fill: url(#surfaceGradientHover);
    }
    .shape {
      cursor: pointer;
    }



    <svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id="surfaceGradient" cx=".6" cy="0.2" r=".8">
          <stop offset="0%" stop-color="white" />
          <stop offset="50%" stop-color="red" />
          <stop offset="100%" stop-color="maroon" />
        </radialGradient>
        <radialGradient id="surfaceGradientHover" cx=".6" cy="0.2" r=".8">
          <stop offset="0%" stop-color="white" />
          <stop offset="40%" stop-color="red" />
          <stop offset="80%" stop-color="maroon" />
        </radialGradient>
      </defs>
      <g class="shape">
        <circle class="circ" cx="150" cy="100" r="80" fill="url(#surfaceGradient)" />
        <text x="150" y="125" font-size="50" text-anchor="middle" fill="white" transform="translate(-10,5)rotate(-5)">
          easy
        </text>
      </g>
    </svg>

I have an SVG element with multiple child items.  I can easily replace the fill for a particular element on hover by looking for the `:hover` CSS property.  But if a sibling element exists on top of the hovered element, it prevents the hover from bubbling up to other elements.  

Here's an example.  The circle's gradient will be replaced when hovering over the circle.  But get anywhere near the text and it will revert back to the original color.





    .circ:hover { 
        fill: url(#surfaceGradientHover);
    }



    <svg version="1.1"
         baseProfile="full"
         width="300" height="200"
         xmlns="http://www.w3.org/2000/svg">
      <defs>
          <radialGradient id="surfaceGradient"
               cx=".6" cy="0.2" r=".8">
              <stop offset="0%" stop-color="white" />
              <stop offset="50%" stop-color="red" />
              <stop offset="100%" stop-color="maroon" />
          </radialGradient>
          <radialGradient id="surfaceGradientHover"
               cx=".6" cy="0.2" r=".8">
              <stop offset="0%" stop-color="white" />
              <stop offset="40%" stop-color="red" />
              <stop offset="80%" stop-color="maroon" />
          </radialGradient>
      </defs>

      <circle class="circ" cx="150" cy="100" r="80"
              fill="url(#surfaceGradient)" />

      <text x="150" y="125" font-size="50" 
             text-anchor="middle" fill="white" 
             transform="translate(-10,5)rotate(-5)">
                 easy
      </text>

    </svg>

SVG hover event doesn't fire when sibling item in the way

[fill="freeze"][1] will persist the state of an animation e.g.






    <svg width="200" height="200" viewBox="0 0 100 100"
         xmlns="http://www.w3.org/2000/svg" 
         xmlns:xlink="http://www.w3.org/1999/xlink">
      <rect id="outline" stroke="black" fill="white" 
            width="100" height="100" >
        <animateTransform id="one"
                          attributeType="XML"
                          attributeName="transform"
                          type="translate"
                          from="0" to="-7"
                          dur="1s" repeatCount="1"
                          fill="freeze"/>
      </rect>
    </svg>




  [1]: http://www.w3.org/TR/SVG/animate.html#TimingAttributes

After the end of an [`AnimateTransform`][1] action, the element snaps back to the original value.  
  This isn't exactly unexpected as it's in the [SMIL documentation][2]:

> As with all animation elements, this only manipulates the presentation value, and when the animation completes, the effect is no longer applied

But it is unwanted. I'd like to find a way to persist the changes using XML animations

### Here's an example in SVG





    <svg width="200" height="200" viewBox="0 0 100 100"
         xmlns="http://www.w3.org/2000/svg" 
         xmlns:xlink="http://www.w3.org/1999/xlink">
      <rect id="outline" stroke="black" fill="white" 
            width="100" height="100" >
        <animateTransform id="one"
                          attributeType="XML"
                          attributeName="transform"
                          type="translate"
                          from="0" to="-7"
                          dur="1s" repeatCount="1" />
      </rect>
    </svg>



One idea I had was to call a [`set`][4] action with [`dur="indefinite"`][5] that was triggered by the end of the first animation with [begin="one.end"][6], but can't quite seem to get the syntax right.  I haven't found any documentation that show how to call `set` for a transformed value.





    <svg width="200" height="200" viewBox="0 0 100 100"
         xmlns="http://www.w3.org/2000/svg" 
         xmlns:xlink="http://www.w3.org/1999/xlink">
      <rect id="outline" stroke="black" fill="white" 
            width="100" height="100" >
        <animateTransform id="one"
                          attributeType="XML"
                          attributeName="transform"
                          type="translate"
                          from="0" to="-7"
                          dur="1s" repeatCount="1" />
        
        
        <set attributeType="XML"
             attributeName="transform"
             type="translate"
             to="-7" begin="one.end" /> 
        
        
        <set attributeType="css"
             attributeName="fill"
             to="green" begin="one.end" />

      </rect>
    </svg>




This question on [persisting the end state of the animation][3] shows how to do this with css transforms by using `-webkit-animation-fill-mode: forwards;`, but that obviously won't have any affect on an svg animation

[1]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform
[2]: http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AnimationElements
[3]: https://stackoverflow.com/q/3273478/1366033
[4]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/set
[5]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dur
[6]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/begin

XML SVG - persist the end state of an animation

### Here's a demo in Plunker to help sort out some of these issues

* [Plunker][1]
* [stack.svg#circ][2]
* [stack.svg#rect][3]

### A URI has a couple basic components:

![URI][8]

* **Protocol** - determines how to send the request
* **Domain** - where to send the request
* **Location** - file path within the domain
* **Fragment** - which part of the document to look in

### Media Fragment URI

A fragment is simply identifying a portion of the entire file. 

Depending on the implementation of the [Media Fragment URI spec][4], it actually might be totally fair game for the browser to send along the Fragment Identifier.  Think about a streaming video, some of which has been cached on the client.  If the request is for <code>/video.ogv<b>#t=10,20</b></code> then the server can save space by only sending back the relevant portion/segment/fragment.  Moreover, if the applicable portion of the media is already cached on the client, then the browser can prevent a round trip.

### Think Round Trips, Not Requests

When a browser issues a GET Request, it does not necessarily mean that it needs to grab a fresh copy of the file all the way from the server.  If it has already has a cached version, the request could be answered immediately.

### HTTP Status Codes

* [200 - OK][6] - Got the resource and returned from the server
* [302 - Found][7] - Found the resource in the cache and not enough has changed since the previous request that we need to get a fresh copy.

### Caching Disabled

Various things can affect whether or not a client will perform caching: The way the request was issued (<kbd>F5</kbd> - soft refresh; <kbd>Ctrl</kbd> + <kbd>R</kbd> - hard refresh), the settings on the browser, any development tools that add attributes to requests, and the way the server handles those attributes.  Often, when a browser's developer tools are open, it will automatically disable caching so you can easily test changes to files.  If you're trying to observe caching behavior specifically, make sure you don't have any developer settings that are interfering with this.

When comparing requests across browsers, to help mitigate the differences between Developer Tool UI's, you should use a tool like [fiddler][5] to inspect the actual HTTP requests and responses that go out over the wire.  I'll show you both for the simple plunker example.  When the page loads it should request two different ids in the same stacked svg file.

Here are [side by side requests of the same test page in Chrome 39, FF 34, and IE 11][9]:

![Fiddler - Disable Caching][10]  
![Dev Tools - Disable Caching][11]

### Caching Enabled

But we want to test what would happen on a normal client where caching is enabled.  To do this, update your dev tools for each browser, or go to fiddler and *Rules* > *Performance* > and uncheck *Disable Caching*.

Now our request should look like this:

![Fiddler - Enable Caching][12]
![Dev Tools - Enable Caching][13]

Now all the files are returned from the local cache, regardless of fragment ID

The developer tools for a particular browser might try to display the fragment id for your own benefit, but fiddler should always display the most accurate address that is actually requested.  Every browser I tested omitted the fragment part of the address from the request:

![HTTP Request][14]

### Bundling Requests

Interestingly, chrome seems to be smart enough to prevent a second request for the same resource, but FF and IE fail to do so when a fragment is part of address.  This is equally true for SVG's and PNG's.  Consequently, the first time a page is ever requested, the browser will load one file for each time the SVG stack is actually used.  Thereafter, it's happy to take the version from the cache, but will hurt performance for new viewers.

### Final Score

**CON**: *First Trip* - SVG Stacks are not fully supported in all browsers.  One request made per instance.  
**PRO**: *Second Trip* - SVG resources will be cached appropriately 

### Additional Resources

* [simurai.com][15] is widely thought to be the first application of using SVG stacks and the article explains some browser limitations that are currently in progress
* Sven Hofmann has a great [article about SVG Stacks][16] that goes over some implementation models.
* Here's the [**source code** in Github][17] if you'd like to fork it or play around with samples
* Here's the [**official spec** for Fragment Identifiers within SVG images][18]
* Quick look at [**Browser Support** for SVG Fragments][19]

### Bugs

Typically, identical resources that are requested for a page will be bundled into a single request that will satisfy all requesting elements.  Chrome appears to have already fixed this, but I've opened bugs for FF and IE to one day fix this.

* **Chrome** - This [very old bug][20] which highlighted this issue appears to have been resolved for webkit.
* **Firefox** - [Bug Added Here][21]
* **Internet Explorer** - [Bug Added Here][22]


[1]: http://plnkr.co/edit/FvabTiApk4IfqAFLVG5M?p=preview
[2]: http://run.plnkr.co/plunks/FvabTiApk4IfqAFLVG5M/stack.svg#circ
[3]: http://run.plnkr.co/plunks/FvabTiApk4IfqAFLVG5M/stack.svg#rect

[4]: http://www.w3.org/TR/media-frags-recipes/
[5]: http://www.telerik.com/fiddler

[6]: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10.2.1
[7]: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10.3.3

[8]: http://i.imgur.com/wVBW6BR.png
[9]: http://imgur.com/a/XKzgp
[10]: http://i.imgur.com/SQH7YRP.png
[11]: http://i.imgur.com/S0ARYot.png
[12]: http://i.imgur.com/Gw4oPwk.png
[13]: http://i.imgur.com/5L3Tpqq.png
[14]: http://i.imgur.com/V65FbnV.png


[15]: http://simurai.com/blog/2012/04/02/svg-stacks/
[16]: http://hofmannsven.com/2013/laboratory/svg-stacking/
[17]: https://github.com/KyleMit/StackSVG

[18]: http://www.w3.org/TR/SVG/linking.html#SVGFragmentIdentifiers
[19]: http://caniuse.com/#feat=svg-fragment

[20]: https://bugs.webkit.org/show_bug.cgi?id=89983
[21]: https://bugzilla.mozilla.org/show_bug.cgi?id=1121693
[22]: https://connect.microsoft.com/IE/feedbackdetail/view/1088029/ie11-svg-fragment-downloaded-for-every-image

I have a series of overlapping questions, the intersection of which can best be asked as:

Under what circumstances does an `#` character (an anchor) in a URL trigger an HTTP fetch, in the context of either an `<a href` or an `<img src` ? 

Normally, should:

    http://foo.com/bar.html#1

and

    http://foo.com/bar.html#2

require two different HTTP fetches?  I would think the answer should definitely be NO.

**More specific details:**

The situation that prompted this question was my first attempt to experiment with [**SVG stacking**][1] - a technique where multiple icons can be embedded within a single `svg` file, so that only a single HTTP request is necessary.  Essentially, the idea is that you place multiple SVG icons within a single file, and use CSS to hide all of them, except the one that is selected using a CSS `:target` selector.

You can then select an individual icon using the `#` character in the URL when you write the `img` element in the HTML:

    <img 
        src="stacked-icons.svg#icon3" 
        width="80" 
        height="60" 
        alt="SVG Stacked Image" 
    />

When I try this out on Chrome it works perfectly.  A single HTTP request is made, and multiple icons can be displayed via the same `svg` url, using different anchors/targets.

However, when I try this with Firefox (28), I see via the Console that *multiple* HTTP requests are made - one for each svg URL!  So what I see is something like:

    GET http://myhost.com/img/stacked-icons.svg#icon1 
    GET http://myhost.com/img/stacked-icons.svg#icon2 
    GET http://myhost.com/img/stacked-icons.svg#icon3 
    GET http://myhost.com/img/stacked-icons.svg#icon4
    GET http://myhost.com/img/stacked-icons.svg#icon5

...which of course defeats the purpose of using SVG stacking in the first place.  

Is there some reason Firefox is making a separate HTTP request for *each* URL instead of simply fetching `img/stacked-icons.svg` once like Chrome does? 

This leads into the broader question of - what rules determine whether an `#` character in the URL should trigger an HTTP request?

  [1]: http://hofmannsven.com/2013/laboratory/svg-stacking/

SVG stacking, anchor elements, and HTTP fetching

Robert is correct that `<use>` is not always applied consistently.  Certainly when you use an SVG as an image, it doesn't know how to apply any of the CSS rules you've added to your page.

But there are a lot of other things here as well that could decide the element's style so an example might be helpful.

Here's a stack snippet to center our discussion.





    svg {
      fill: blue;
    }
    a:hover svg {
      fill: red;
    }
    .skip-link .icon {
      fill: purple;
    }

    .green {
      fill: green;
    }



    <a href="#" class="skip-link">
      <svg xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink"
           class="icon" >

        <def>
          <text id="text" >use xlink</text>
          <text id="over" class="green">use xlink override</text>
        </def>
        
        <text x="5" y="15" >Plain</text>
        <use  x="5" y="30" xlink:href="#text" />

        <use  x="5" y="50" xlink:href="#over" />
        <text x="5" y="65" class="green" >class="green"</text>
        <text x="5" y="80" fill="orange" >fill="orange"</text>

      </svg>
    </a>



### Specificity

The SVG element itself is being styled with several conflicting rules. What determines which rule wins has to do with [specificity and order].  In this case, the SVG element itself will end up purple.  The hover anchor rule, for example, will never show up because it is less specific than `.skip-link .icon`

![SVG][2]

### Inheritance

Some properties allow for inheritance from their parents, but only when not specified themselves.  Any specifications will override the inherited value.  If the question is, my `<svg>` element has a certain style, why isn't it being applied to all child elements equally, the answer is simple.  It's perfectly fine for child elements to specify their own value and override the inherited one.

    <text x="5" y="65" style="fill:green;" >class="green"</text>
    <text x="5" y="80" fill="orange" >fill="orange"</text>

### Use & Xlink

The tricky part becomes what happens when use is involved.  In this case, it can be hard to trace the actual styles being applied.  Use will create an inline representation of the element identified by the `xlink` attribute, but you cannot access this element directly.  Therefore, selecting `use` in the developer tools will only reveal the styles applied to the parent of the element.  The element itself may override the inherited properties and we'd have no way of observing it in the dev panel.

Here, for example, the style applied to use is inherited from the parent.  In the developer tools, it appears that the winning rule is purple, but this is only because it hasn't taken into consideration the element being pulled in.  This is a *soft* value that can be overridden if the element specifies any value.

![use][3]

But the full set of selectors for the inlined text would actually look like this:

![text][4]

### Specific Situation

One thing I'd suggest in the future is **providing runnable code** that other people can use to easily reproduce the issue as it saves a lot of extra debugging time.  However, here's what I suspect is happening with your exact situation:





    svg {
      fill: #002649;
    }
    a:hover svg {
      fill: #8A8B8C;
    }
    .skip-link .icon {
      fill: #FFF;
    }



    <a href="#" class="skip-link">
      <svg xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink"
           class="icon" >

        <def>
          <svg xmlns="http://www.w3.org/2000/svg" id="menu-bag">
            <rect height="100" width="100" />
          </svg>
        </def>

        <use xlink:href="#menu-bag" />

      </svg>
    </a>



[1]: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
[2]: http://i.imgur.com/5FPX0Rw.png
[3]: http://i.imgur.com/aheTEBt.png
[4]: http://i.imgur.com/VGsJ4Yv.png

I can't seem to figure out why Firefox is using the default svg fill color instead of the class's fill.

Here are the 3 fills when viewing the FF inspector: 

![CSS](http://i.stack.imgur.com/eeyKQ.png)

SVG is being inserted via

    <svg class="icon">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu-bag"></use>
    </svg>

It should be showing the .skip-link .icon fill of white (#fff) but it's actually using the SVG fill of #002649; If i change .skip-link .icon to .skip-link svg then it works fine. Why can I not use a class and instead but explicitly state the element??

Am I missing something obvious about how Firefox fills an SVG? This CSS works fine in other browsers.

SVG Fill not being applied in FireFox

Some suggestions if you want to make your logo portable and available offline you should *consume* and *embed* the smallest version of your font possible.

First, **optimize the font size**, by only pulling in the stroke weights and characters you actually need.

So instead of this:



<pre><code><a href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic">https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic</a></code></pre>


Condense the options and also add the `?text=abc` param to only grab a subset of glyphs like this:



<pre><code><a href="https://fonts.googleapis.com/css?family=Roboto:700&text=Words%20go%20here">https://fonts.googleapis.com/css?family=Roboto:700<i><b>&text=Words%20go%20here</b></i></a></code></pre>

Inside your svg, you can include a [`@font-face`][6] declaration in a stylesheet in the `<defs>` tag like this:




<pre><code>&lt;defs&gt;
  &lt;style&gt;
    @font-face {
      font-family: "Sample font";
      src: url("data:application/font-woff;charset=utf-8;base64,<b><i>&lt;b64&gt;</i></b>") format("woff2");
    }
  &lt;/style&gt;
&lt;/defs&gt;</code></pre>

Grab the file by navigating to the google fonts stylesheet and downloading the actual .woff2 file.  You can convert it to a b64 string using [base64-encoder][2] or read more at [Converting and rendering web fonts to base64][3].  Take that string and include it in your file.  Just for clarity, you could also specify the [unicode range][4] on the font-face to make explicit that you're only pulling in some characters





    <svg xmlns="http://www.w3.org/2000/svg" 
         xmlns:xlink="http://www.w3.org/1999/xlink" 
         viewBox="0 0 280 140" width="300">

      <defs>

        <style>
          /* https://fonts.googleapis.com/css?family=Patrick+Hand&text=KAM */
          @font-face {
            font-family: 'Patrick Hand';
            /* src: url(https://fonts.gstatic.com/l/font?kit=LDI1apSQOAYtSuYWp8ZhfYeMXNDN0vF8&skey=7fb0ea6515a61339&v=v11) format('woff2') */
            src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff2');
            unicode-range: U+004B, U+0041, U+004D
          }
          text { 
            font-size: 140px;
            font-family: 'Patrick Hand', cursive;
            font-weight: 700; 
          }
        </style>
      </defs> 

        <text x="51"  y="132" rotate="-30">K</text>
        <text x="100" y="100" rotate="0">A</text>
        <text x="150" y="95"  rotate="30">M</text>

    </svg>



**See Also**:  

* [How do I embed Google Web Fonts into an SVG?][1]

[1]: https://graphicdesign.stackexchange.com/a/5167/35880
[2]: https://www.giftofspeed.com/base64-encoder/
[3]: https://stackoverflow.com/q/26867893/1366033
[4]: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range
[6]: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

I'm embedding SVGs in my page with the `<object>` tag, and they're supposed to utilize Google Fonts (e.g. [Roboto][1]). However, the SVGs aren't picking these fonts up and instead default to system fonts.

What am I doing wrong? Does every SVG require that the font itself be embedded in `<style>`?

**Example code:**

    <head>
        <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    </head>
    
    <body>
        <object width="250" height="200" type="image/svg+xml" data="img/popup_image.svg"></object>
    </body>

**SVG snippet:**

    <text font-size="14" fill="#333" font-family="Roboto">Words go here</text>

  [1]: https://www.google.com/fonts#UsePlace:use/Collection:Roboto



Using Google Fonts with SVG <object>

Per [ccprog's comment][5], there are some [rendering issues / complications][2] with using [transforms][3] on [`<tspan>`][0].

Here are the available [**attributes on `<tspan>`**][1]:

[<img src="https://i.stack.imgur.com/e39Go.png" width="515" />][1]

You *might* be able to fit your needs by combining `rotate`, `dx`, & `dy` to various effects.  Some people have had luck wrapping the `<text>` element inside of an `<a>` as it [does allow transform][4].

[0]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan
[1]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan#Attributes
[2]: https://github.com/w3c/svgwg/issues/210
[3]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
[4]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a#Global_attributes
[5]: https://stackoverflow.com/questions/44345913/svg-tspan-transform-skew#comment75696204_44345913

I'm looking for a way to skew a `tspan` with `transform="skewX(-45)"`, but it only seems to work on the parent `text` as a whole. The problem is a want surrounding `tspan`s to be unaffected by the skew, only the middle one. The reason I don't want to use multiple `text`s is that I want the flow calculations to be done for me instead of me positioning the `text`s manually (so future font change doesn't throw the text flow off). I also need the following text spans to be flown with respect to the width of the slanted text span, not the original one.

Is there a way to apply `transform` to a `tspan` only or can this be done with multiple `text`s while preserving the text flow?

SVG tspan transform skew

Could be just a typo with your closing group tag `<g/>`





    <svg xmlns="http://www.w3.org/2000/svg" width="466" height="466" viewBox="-40 -40 80 80">
        <defs>
           <g id="yinyang">
            <circle r="39"/>
            <path d="M0,38a38,38 0 0 1 0,-76a19,19 0 0 1 0,38a19,19 0 0 0 0,38" fill="#fff"/>
            <circle cy="19" r="5" fill="#fff"/>
            <circle cy="-19" r="5"/>
          </g>
        </defs>
        
        <use href="#yinyang" transform="scale(0.9)"/>
    </svg>



Also, the use block will repeat the shape that is already visible.  If you just want to define it somewhere, and re-use it elsewhere, you can put inside of a `<defs>` block

I've been trying to learn how to create graphics with SVG recently, and I am coming up against a problem when trying to display an image with the 'use' tag.

I've successfully played around with the 'use' tag to create duplicate objects in other svgs, so I'm not sure what's going on here.
My attempt to display this symbol with 'use' tag results in an invisible object with 0x0 as width x height

    
    <svg xmlns="http://www.w3.org/2000/svg" width="466" height="466" viewBox="-40 -40 80 80">
    	<g id="yinyang">
    	<circle r="39"/>
    	<path d="M0,38a38,38 0 0 1 0,-76a19,19 0 0 1 0,38a19,19 0 0 0 0,38" fill="#fff"/>
    	<circle cy="19" r="5" fill="#fff"/>
    	<circle cy="-19" r="5"/>
    	<g/>
    	<use href="#yinyang" transform="scale(20)"/>
    </svg>
    		
**How could i fix this?**

Why is SVG not rendering the object referenced by the <use> tag?

If I have the following SVG image for example:



<pre><code>&lt;svg <b>role="img"</b> viewbox="0 0 100 50" height="100px"&gt;
  <b>&lt;title&gt;Site Logo&lt;/title&gt;</b>
  &lt;rect x="0" y="00" width="100" height="10" fill="red"&gt;&lt;/rect&gt;
  &lt;rect x="0" y="10" width="100" height="10" fill="salmon"&gt;&lt;/rect&gt;
  &lt;rect x="0" y="20" width="100" height="10" fill="pink"&gt;&lt;/rect&gt;
  &lt;rect x="0" y="30" width="100" height="10" fill="aqua"&gt;&lt;/rect&gt;
  &lt;rect x="0" y="40" width="100" height="10" fill="blue"&gt;&lt;/rect&gt;
&lt;/svg&gt;</code></pre>

I should be hitting [a11y svg guidelines][1] by setting `role=img` and including a `<title>` element

However, when I run the [Accessibility Audit in Firefox][5], it adds a warning for every element/graphic inside the SVG (path, rect, circ) with the following warning:

> Content with images must be labeled. [Learn more][2]

<img src="https://i.stack.imgur.com/afDJ3.png" width="550" alt="Example warning" title="">

But surely I don't need to mark up every individual path within the svg?

What should I do to improve a11y or indicate to FF what the correct alt text is?

Here's a [demo page in fiddle that will reproduce this issue][3]

  [1]: https://www.deque.com/blog/creating-accessible-svgs/
  [2]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Text_labels_and_names
  [3]: https://jsfiddle.net/KyleMit/7wbvogue/
  [4]: https://i.stack.imgur.com/afDJ3.png
  [5]: https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector#Check_for_accessibility_issues

Firefox A11y Audit with inline SVGs - content with images must be labeled

The [`viewBox`][1] determines the visible dimensions in the SVG. 

Yours is `0 0 1440 320` (*min-x*, *min-y*, *width* and *height*). You can alter it to crop the contents of the svg. Something like `viewBox="0 230 1440 100"` looks like it fits better

[1]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox







    <div class="grey-curve-svg">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 230 1440 100">
        <path fill="#0099ff" 
              fill-opacity="1" 
              style="--darkreader-inline-fill:#007acc;"  
              data-darkreader-inline-fill="" 
              d="M0,320L120,298.7C240,277,480,235,720,234.7C960,235,1201,277,1320,298.7L1440,320L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z" 
              ></path>
      </svg>
    </div>

I how do I remove the extra whitespace in this svg? When I inspect the blue curve is is the path and the highlighted blue is the entire svg. I don't understand I tried adjusting the view box and a couple different properties it didn't work?

The .grey-curve-svg is just an empty div with no styles.

Here is the svg:





    <div class="grey-curve-svg">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path fill="#0099ff" 
              fill-opacity="1" 
              style="--darkreader-inline-fill:#007acc;"  
              data-darkreader-inline-fill="" 
              d="M0,320L120,298.7C240,277,480,235,720,234.7C960,235,1201,277,1320,298.7L1440,320L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z" 
              ></path>
      </svg>
    </div>



[![svg][1]][1]


  [1]: https://i.stack.imgur.com/LxVmv.png