I have noticed that some SVGs behave strangely when I try to include them with the <svg><use xlink:href="id-of-symbol" /></svg>. But if SVG is injected directly or referenced through <img> they look correctly.
I have created an example on CodePen: http://codepen.io/andeersg/full/qRWMQv/. In Chrome all three versions look the same, while in FireFox and IE11 the middle one is broken (the use version).
Have I done something wrong with SVG or is this a known bug?
mask, clipPath and filter elements (basically anything non-rendered that needs to be accessed by url() reference) don't work if they are within symbol elements in Firefox. This is a known bug.
There's an easy workaround though which is to move those elements outside the symbol element.
<svg width="0" height="0" style="position:absolute">
<mask id="ata" fill="#fff"><path d="M0 4.11c0 2.27 1.838 4.11 4.103 4.11a4.107 4.107 0 0 0 4.104-4.11C8.207 1.84 6.37 0 4.103 0A4.107 4.107 0 0 0 0 4.11z"></path></mask>
<mask id="atb" fill="#fff"><path d="M0 5.17c0 2.348 1.9 4.25 4.242 4.25a4.245 4.245 0 0 0 4.243-4.25c0-2.346-1.9-4.248-4.243-4.248A4.246 4.246 0 0 0 0 5.17z"></path></mask>
<symbol viewBox="0 0 65 72" id="helseogfamilie"><title>Page 1</title><g transform="translate(1)" fill="none" fill-rule="evenodd"><g transform="translate(1.06 4.242)" stroke="#4A5A28" stroke-width="3"><path d="M37.736.928V28.19c0 10.34-8.447 18.802-18.772 18.802S.19 38.531.19 28.19V.928"></path><path d="M55.824 26.98v19.743c0 10.34-8.447 18.801-18.772 18.801s-18.773-8.46-18.773-18.801"></path></g><g transform="translate(0 1.06)"><path fill="#4A5A28" mask="url(#ata)" d="M-5.303 13.523H13.51V-5.303H-5.303z"></path></g><g transform="translate(31.818)"><path fill="#4A5A28" mask="url(#atb)" d="M-5.303 14.722h19.09V-4.38h-19.09z"></path></g><path d="M62.465 25.635a5.584 5.584 0 0 1-5.579 5.588 5.584 5.584 0 0 1-5.58-5.588 5.584 5.584 0 0 1 5.58-5.589 5.584 5.584 0 0 1 5.579 5.589z" stroke="#4A5A28" stroke-width="2"></path></g></symbol>
</svg>
<svg width="65px" height="72px" viewBox="0 0 65 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40.2 (33826) - http://www.bohemiancoding.com/sketch -->
<title>Page 1</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M0,4.10984848 C0,6.37954545 1.8380303,8.21969697 4.10348485,8.21969697 C6.37,8.21969697 8.2069697,6.37954545 8.2069697,4.10984848 C8.2069697,1.84015152 6.37,0 4.10348485,0 C1.8380303,0 0,1.84015152 0,4.10984848 L0,4.10984848 Z" id="helseogfamilie-path-1"></path>
<path d="M0,5.17045455 C0,7.51757576 1.89954545,9.41924242 4.24242424,9.41924242 C6.58530303,9.41924242 8.48484848,7.51757576 8.48484848,5.17045455 C8.48484848,2.82439394 6.58530303,0.921666667 4.24242424,0.921666667 C1.89954545,0.921666667 0,2.82439394 0,5.17045455 L0,5.17045455 Z" id="helseogfamilie-path-3"></path>
</defs>
<g id="Forside" stroke="none" fill="none" fill-rule="evenodd">
<g transform="translate(-988.000000, -623.000000)" id="Page-1">
<g transform="translate(989.000000, 623.000000)">
<g id="Group-5" transform="translate(1.060606, 4.242424)" stroke="#4A5A28" stroke-width="3">
<path d="M37.7363636,0.928136364 L37.7363636,28.1899545 C37.7363636,38.5308636 29.2886364,46.9923788 18.9636364,46.9923788 C8.63863636,46.9923788 0.190909091,38.5308636 0.190909091,28.1899545 L0.190909091,0.928136364" id="helseogfamilie-Stroke-1"></path>
<path d="M55.8244697,26.9805455 L55.8244697,46.7226667 C55.8244697,57.0635758 47.3767424,65.5240303 37.0517424,65.5240303 C26.7267424,65.5240303 18.2790152,57.0635758 18.2790152,46.7226667" id="helseogfamilie-Stroke-3"></path>
</g>
<g id="Group-8" transform="translate(0.000000, 1.060606)">
<mask id="helseogfamilie-mask-2" fill="white">
<use xlink:href="#helseogfamilie-path-1"></use>
</mask>
<g id="Clip-7"></g>
<polygon id="Fill-6" fill="#4A5A28" mask="url(#helseogfamilie-mask-2)" points="-5.3030303 13.5227273 13.51 13.5227273 13.51 -5.3030303 -5.3030303 -5.3030303"></polygon>
</g>
<g id="Group-11" transform="translate(31.818182, 0.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#helseogfamilie-path-3"></use>
</mask>
<g id="Clip-10"></g>
<polygon id="Fill-9" fill="#4A5A28" mask="url(#mask-4)" points="-5.3030303 14.7222727 13.7878788 14.7222727 13.7878788 -4.38136364 -5.3030303 -4.38136364"></polygon>
</g>
<path d="M62.4649242,25.6347424 C62.4649242,28.7211061 59.967197,31.2230758 56.8861364,31.2230758 C53.8029545,31.2230758 51.3052273,28.7211061 51.3052273,25.6347424 C51.3052273,22.5483788 53.8029545,20.0464091 56.8861364,20.0464091 C59.967197,20.0464091 62.4649242,22.5483788 62.4649242,25.6347424 L62.4649242,25.6347424 Z" id="helseogfamilie-Stroke-12" stroke="#4A5A28" stroke-width="2"></path>
</g>
</g>
</g>
</svg>
<svg width="65" height="72"><use xlink:href="#helseogfamilie" /></svg>
<img src="https://beta.mgk.no/themes/custom/mgk/dev/svg/helseogfamilie.svg">
Related
I need multiple straight lines, and I have set the stroke-width to 4, but when I try to rotate them, the lines get thicker. Also when I try to set a negative value, for example <path d="M0 -10 20 0" stroke-width="4" stroke="red"></path> the line almost completely dissapears
<svg id="svg" width="100%" height="50">
<path d="M0 10 40 0" stroke-width="4" stroke="red"></path>
<path d="M40 0 80 0" stroke-width="4" stroke="blue"></path>
<path d="M80 0 120 0" stroke-width="4" stroke="green"></path>
</svg>
As said #Temani Afif half the width of the line goes beyond the border of the canvas of the SVG
Look please, I showed the borders of the canvas of the SVG with a gray line
<svg id="svg" width="100%" height="50" style="border:1px solid gray;">
<path d="M0 10 40 0" stroke-width="4" stroke="red"></path>
<path d="M40 0 80 0" stroke-width="4" stroke="blue"></path>
<path d="M80 0 120 0" stroke-width="4" stroke="green"></path>
</svg>
You can solve this problem by adding a viewBox and moving down the whole picture by adding the value -10 to the viewBox parameter
By setting the width and height of the SVG canvas as a percentage, you make your application responsive
<svg id="svg" width="100%" height="100%" viewBox="0 -10 150 50" style="border:1px solid gray;">
<path d="M0 10 40 0" stroke-width="4" stroke="red"></path>
<path d="M40 0 80 0" stroke-width="4" stroke="blue"></path>
<path d="M80 0 120 0" stroke-width="4" stroke="green"></path>
</svg>
You can also move the whole picture down 10 pixels with the command transform="translate(0 10)"
<svg id="svg" width="100%" height="100%" viewBox="0 0 150 50" style="border:1px solid gray;">
<g transform="translate(0 10)">
<path d="M0 10 40 0" stroke-width="4" stroke="red"></path>
<path d="M40 0 80 0" stroke-width="4" stroke="blue"></path>
<path d="M80 0 120 0" stroke-width="4" stroke="green"></path>
</g>
</svg>
My svg is displayed correct in IE, Edge and Chrome. Firefox doesn't work. The problem is, that the text doesn't appear correct.
Chrome
chrome
FF
Firefox Version
Here the code of my svg. I really don't know what the problem is.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="780px" height="540px" viewBox="0 0 780 540" enable-background="new 0 0 780 540" xml:space="preserve">
<a href="https://www.google.ch" target="_blank">
<g>
<image
overflow="visible"
opacity="0.35"
width="56"
height="52"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAA1CAYAAAD72kP+AAAACXBIWXMAAAsSAAALEgHS3X78AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAu9JREFUeNrsmmtv0zAUhp1LU5goDDGuAgk+8oH//0s2beIqBmUbW9e10DVN13AOeU0PrtMLrUuqOtKreU2jniev7ZP4OFRbcMQzzgcbxJIvAhkY2iRIqVJIhorweYx2uAGwI2goNLJBasA66Q6pQdoh1SrsqnbshpSSfpA6pGtSpkFNyBiAT0nPSXsAjSvu4oB0RTohHZPOAf6769ogGwB8Q3pF2hVuVtFJhuyRTkmHpD4c7QP0j0OBgGTnHpJekl6jnVR4XPL4+0m6S+qSPiNePZfkZjcM4dpt0n0APsI4rTJkF+41EGsk4y1LITFgE1xUxw2oYneNMCZriHsiG8RTHgBkrqxqGpGxhWVZIFRbcHhID+khPaSH9JAe0kN6SA/pIT2kh/SQHtJDbiFkbvzdlKM07jInR0J5hYF1bGa8UyH5C7y0zsWSFMrUuK5QNUBdyRqIeIcmbGzcEV0d4hXpFulCFQUgvhm31HhlOqgIIMNxieASsbZVURfJZA+MxIV6gbYGoET9vSodWtwP/hMcQ3BBh8t0Z6RPpCPSW1XUQlowa2RCyqB1l81s9lsAgzV2TV2HZOe+kt6R9kkHaJ/g/NDmpDkm+7C+h3a/ZHy6hLXBsUvfSB/h3j7EgE24m0pjopLZaij6u67edtC+XgNsGVzTAneEz84wl6RmbNEcs1YPF7ehK/zvAnYeuAPAccH1A861xIQzMbSiGT8ou6521AXsonDvMR7P8d1UjMGJVBfN+eM3cHXVsMvAdRFP2cQ4N+QqYU1I53DLTBA6n0bIpVx653r9A9ITVWyqeAE9U0VJfhcPFQmuy41cd4Gpn0GOoSYmk7boktm/PGouMwsuCruH84ka79i4dAm3yrw2L6wG3UFXlvtuvriAc5G8p8E+VsUGKA05BOQpEvt3F3AuH8dssLz15B6g63CyB9COK7h1PHNK2BrgzIlnADmBW+dbRCDeYkJLWnL+Yr7OVyW5Pyi3LFv4w6/WzTh+CTAA7UuPJ4vLMvAAAAAASUVORK5CYII="
transform="matrix(1 0 0 1 490.2483 147.248)"
></image>
<g>
<g>
<polygon
fill="red"
points="540.724,151.425 540.724,180.043 518.262,191.72 495.801,180.043 495.801,151.425"
/>
<polygon
fill="none"
stroke="#D9D9D9"
stroke-width="0.75"
stroke-linejoin="round"
stroke-miterlimit="10"
points="540.724,151.425 540.724,180.043 518.262,191.72 495.801,180.043 495.801,151.425"
/>
</g>
</g>
</g>
</a>
<text transform="matrix(1 0 0 1 509.5081 163.1104)">
<tspan x="0" y="0" fill="#949495" font-family="'Calibri'" font-size="11">
KVP
</tspan>
<tspan
x="-0.516"
y="12"
fill="#949495"
font-family="'Calibri'"
font-size="11"
>
[VP]
</tspan>
</text>
<path
fill="none"
stroke="#A3D2C4"
stroke-width="0.75"
stroke-linejoin="round"
stroke-miterlimit="10"
d="M664.349,162.086"
/>
</svg>
This is not an answer, it's just a comment: As you can see the next example works the same way in Chrome and FF. There must be something else in your code that is causing the problem.
svg{border:1px solid;}
<svg viewBox="240 120 90 50">
<rect x="260" y="135" width="50" height="20" fill="none" stroke="black" />
<text id="txt"
transform="matrix(1 0 0 1 262.6731 147.9746)"
fill="#1D1D1B"
font-family='Calibri'
font-size="11"
>
Betrieb
</text>
</svg>
UPDATE
The OP added more code.
I've replaced the <tspan> with <text> elements. Instead of having the <a> inside the text, now the <a> is wrapping the text.
Also I've replaced your image with a shadow generated with an svg filter.
svg{border:1px solid}
text{fill:#949495;font-family:Calibri;font-size:11;text-anchor:middle}
<svg viewBox="480 140 78 60">
<defs>
<filter id="f">
<feGaussianBlur in="SourceAlpha" stdDeviation="1.3" result="desenfoque"></feGaussianBlur>
<feOffset in="desenfoque" dx="0" dy="0" result="sombra"></feOffset>
<feMerge>
<feMergeNode in="sombra"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<a href="https://www.google.ch" target="_blank">
<g>
<g>
<g filter="url(#f)">
<polygon
fill="red"
points="540.724,151.425 540.724,180.043 518.262,191.72 495.801,180.043 495.801,151.425"
/>
<polygon
fill="none"
stroke="#D9D9D9"
stroke-width="0.75"
stroke-linejoin="round"
stroke-miterlimit="10"
points="540.724,151.425 540.724,180.043 518.262,191.72 495.801,180.043 495.801,151.425"
/>
</g>
</g>
</g>
</a>
<a href="https://google.ch">
<text x="518.5" y="167" >KVP</text>
</a>
<a href="https://google.ch">
<text x="518.5" y="180" >[VP]</text>
</a>
<!--This path has a width and a height == 0
you can delete it -->
<path
fill="none"
stroke="#A3D2C4"
stroke-width="0.75"
stroke-linejoin="round"
stroke-miterlimit="10"
d="M664.349,162.086"
/>
</svg>
Is it possible to put an outline or something on a mask so that you can actually see where the mask is? I have an element that I'm trying to mask, but I can't actually see if lining up to where it should.
What I'm trying to do is use the endScreen ID as a mask and using the startOrder ID for the object being masked. Right not it's masking it, but not correctly and it would be nice to visibly be able to see the mask where it is in the design.
<svg id="demo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 337.32 386.57">
<style>
.st0 {
fill: #fff
}
.st5 {
fill: #c32034
}
</style>
<defs>
<mask id="button-mask" width="1" height="1">
<path d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" fill="white" />
</mask>
</defs>
<path id="endScreen" class="st0" d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" />
<circle id="startScreen" class="st0" cx="167.67" cy="199.37" r="91" />
<path id="base" fill="none" stroke="#c1a88b" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M6 374.88h326.27" />
<path id="phoneOutline" d="M302.12 372.43V55.31c0-25.15-21.05-45.73-46.78-45.73H82.26c-25.73 0-46.78 20.58-46.78 45.73v317.13" fill="none" stroke="#c1a88b" stroke-width="7.358" stroke-linecap="round" stroke-miterlimit="10" />
<circle id="speakerSmall" cx="204.78" cy="43.04" r="4.4" fill="#c1a88b" />
<path id="speakerLarge" fill="none" stroke="#c1a88b" stroke-width="9" stroke-linecap="round" stroke-miterlimit="10" d="M132.04 43.23h59.45" />
<path id="startOrder" class="st5" d="M236.62 337.2H99.44c-6.6 0-12-5.4-12-12v-20.48c0-6.6 5.4-12 12-12h137.17c6.6 0 12 5.4 12 12v20.48c.01 6.6-5.39 12-11.99 12z" mask="url(#button-mask)" />
<path id="star" class="st5" d="M168.66 91.97l4.94 10.01 11.04 1.6-7.99 7.79 1.89 11.01-9.88-5.2-9.89 5.2 1.89-11.01-7.99-7.79 11.05-1.6z" />
<circle id="endOrder" cx="165.72" cy="313.53" r="36.5" fill="#89bd40" />
<path id="check" fill="none" stroke="#fdfeff" stroke-width="7" stroke-miterlimit="10" d="M147.32 255.76l12.88 11.5 23.93-23.46" />
</svg>
Define the path you want to use for the mask first as a template by itself, without any presentation attribute, and then reference it twice: first, inside the mask with fill="white", and then again with fill="none" stroke="blue" on top off your grafic.
You'll note your path isn't closed, but obviously a fill will create an implicit close between the endpoints, which the stroke doesn't show. An easy solution that changes effectively nothing for your mask is to add a z command at the end of the path definition.
.st0 {
fill: #fff
}
.st5 {
fill: #c32034
}
<svg id="demo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 337.32 386.57">
<defs>
<path id="shape" d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" fill="white" />
<mask id="button-mask" width="1" height="1">
<use href="#shape" fill="white" />
</mask>
</defs>
<path id="endScreen" class="st0" d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" />
<circle id="startScreen" class="st0" cx="167.67" cy="199.37" r="91" />
<path id="base" fill="none" stroke="#c1a88b" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M6 374.88h326.27" />
<path id="phoneOutline" d="M302.12 372.43V55.31c0-25.15-21.05-45.73-46.78-45.73H82.26c-25.73 0-46.78 20.58-46.78 45.73v317.13" fill="none" stroke="#c1a88b" stroke-width="7.358" stroke-linecap="round" stroke-miterlimit="10" />
<circle id="speakerSmall" cx="204.78" cy="43.04" r="4.4" fill="#c1a88b" />
<path id="speakerLarge" fill="none" stroke="#c1a88b" stroke-width="9" stroke-linecap="round" stroke-miterlimit="10" d="M132.04 43.23h59.45" />
<path id="startOrder" class="st5" d="M236.62 337.2H99.44c-6.6 0-12-5.4-12-12v-20.48c0-6.6 5.4-12 12-12h137.17c6.6 0 12 5.4 12 12v20.48c.01 6.6-5.39 12-11.99 12z" mask="url(#button-mask)" />
<path id="star" class="st5" d="M168.66 91.97l4.94 10.01 11.04 1.6-7.99 7.79 1.89 11.01-9.88-5.2-9.89 5.2 1.89-11.01-7.99-7.79 11.05-1.6z" />
<circle id="endOrder" cx="165.72" cy="313.53" r="36.5" fill="#89bd40" />
<path id="check" fill="none" stroke="#fdfeff" stroke-width="7" stroke-miterlimit="10" d="M147.32 255.76l12.88 11.5 23.93-23.46" />
<use href="#shape" fill="none" stroke="blue" />
</svg>
It might be worth noting that this is a solution only fitting for your specific situation. If the mask had a stroke defined, another stroke around that one cannot be shown like that. Effectively, the technique is more fit for a clip-path (that is pure form) than a mask (which is a arbitrary grafical structure).
I have an SVG with a path that I am trying to mask out.
I have a circle tag with an id of startCircle and a path with an id of startOrder. The circle one is working, the path is not, but I'm not sure why.
<svg id="wawa" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 337.32 386.57">
<style>
.st0 {
fill: #fff
}
.st5 {
fill: #c32034
}
</style>
<defs>
<mask id="button-mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<path d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" fill="#fff" />
</mask>
</defs>
<path id="endScreen" class="st0" d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25"/>
<path id="base" fill="none" stroke="#c1a88b" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M6 374.88h326.27" />
<path id="phoneOutline" d="M302.12 372.43V55.31c0-25.15-21.05-45.73-46.78-45.73H82.26c-25.73 0-46.78 20.58-46.78 45.73v317.13" fill="none" stroke="#c1a88b" stroke-width="7.358" stroke-linecap="round" stroke-miterlimit="10" />
<path id="startOrder" class="st5" d="M236.62 337.2H99.44c-6.6 0-12-5.4-12-12v-20.48c0-6.6 5.4-12 12-12h137.17c6.6 0 12 5.4 12 12v20.48c.01 6.6-5.39 12-11.99 12z" mask="url(#button-mask)" />
<circle id="startCircle" cx="110" cy="110" r="100" fill="#9c6" mask="url(#button-mask)" />
</svg>
I set up a pen to show what I am talking about
codepen
The answer is in the TweenMax library you are including:
TweenMax.set( '#startOrder',{x:"+=100"});
This moves the #startOrder 100 px to the right by setting a
transform="matrix(1,0,0,1,100,0)"
Transforms are applied after masks (they are always the last operation), and before the translation the path lies completely within the mask shape.
You can solve this by moving the path inside a group and applying the mask to the group:
<g mask="url(#button-mask)">
<path id="startOrder" ... />
</g>
Is there a way to give an inline SVG an alt tag? Here is the code that I have for my inline SVG, but the alt tag is not showing (and I'm not even sure the way that I coded the alt tag is valid, after searching online for clarification):
<svg version="1.1" id="svg-header-filter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27px" height="27px" viewBox="0 0 37 37" enable-background="new 0 0 37 37" xml:space="preserve" alt="Hello world!">
<path class="header-filter-circle" d="M17.796,0C7.947,0,0,7.988,0,17.838s7.947,17.787,17.796,17.787c9.848,0,17.829-7.935,17.829-17.783 C35.625,7.988,27.644,0,17.796,0z"/>
<g>
<path class="header-filter-icon" fill="#FFFFFF" d="M15.062,30.263v-9.935l-8.607-8.703h22.343l-8.744,8.727v5.029L15.062,30.263z M8.755,12.625l7.291,7.389 v7.898l3.025-2.788v-5.086l7.426-7.413H8.755z"/>
</g>
</svg>
And here is the JSFiddle: http://jsfiddle.net/FsCMM
You should use title element, not alt tag, to display tooltips:
<svg version="1.1" id="svg-header-filter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27px" height="27px" viewBox="0 0 37 37" enable-background="new 0 0 37 37" xml:space="preserve">
<title>Hello world!</title>
<path class="header-filter-circle" d="M17.796,0C7.947,0,0,7.988,0,17.838s7.947,17.787,17.796,17.787c9.848,0,17.829-7.935,17.829-17.783 C35.625,7.988,27.644,0,17.796,0z"/>
<g>
<path class="header-filter-icon" fill="#FFFFFF" d="M15.062,30.263v-9.935l-8.607-8.703h22.343l-8.744,8.727v5.029L15.062,30.263z M8.755,12.625l7.291,7.389 v7.898l3.025-2.788v-5.086l7.426-7.413H8.755z"/>
</g>
</svg>
for chrome34: wrap graphics by g element and insert title element to this.
<svg version="1.1" id="svg-header-filter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27px" height="27px" viewBox="0 0 37 37" enable-background="new 0 0 37 37" xml:space="preserve">
<g>
<title>Hello world!</title>
<path class="header-filter-circle" d="M17.796,0C7.947,0,0,7.988,0,17.838s7.947,17.787,17.796,17.787c9.848,0,17.829-7.935,17.829-17.783 C35.625,7.988,27.644,0,17.796,0z"/>
<g>
<path class="header-filter-icon" fill="#FFFFFF" d="M15.062,30.263v-9.935l-8.607-8.703h22.343l-8.744,8.727v5.029L15.062,30.263z M8.755,12.625l7.291,7.389 v7.898l3.025-2.788v-5.086l7.426-7.413H8.755z"/>
</g>
</g>
</svg>
With <title> it works nice, the below example shows title (acts like alt for images) for more than one path:
<svg height="200pt" viewBox="0 0 200 200" width="200pt" style="background-color: var(--background);">
<g>
<title>Gray path</title>
<path fill="none" stroke="gray" stroke-width="20" d="M 179.89754857473488 95.95256479386293 A 80 80 0 0 0 100 20">
</path>
</g>
<g>
<title>Red path</title>
<path fill="none" stroke="red" stroke-width="20" d="M 91.90160519334194 179.58904448198567 A 80 80 0 0 0 179.89754857473488 95.95256479386293">
</path>
</g>
<g>
<title>Blue path</title>
<path fill="none" stroke="blue" stroke-width="20" d="M 32.111795102681654 57.67752800438377 A 80 80 0 0 0 91.90160519334194 179.58904448198567">
</path>
</g>
<g>
<title>Green path</title>
<path fill="none" stroke="green" stroke-width="20" d="M 99.99999999999999 20 A 80 80 0 0 0 32.111795102681654 57.67752800438377">
</path>
</g>
</svg>