Stroke-linecap round with polyline - svg

I am very new to SVG and I am having some trouble with my SVG polyline. I am trying to round the top of the arrow below with stroke-linecap="round" and stroke-linejoin="round" but it doesn't seem to work.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 23.7 44.5" enable-background="new 0 0 23.7 44.5" xml:space="preserve">
<polygon points="22.3,44.5 23.7,43.1 2.8,22.3 23.7,1.4 22.3,0 0,22.3 " stroke-width="10" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Am I doing anything wrong?


You haven't specified a stroke so no stroke is drawn (try stroke="red") . The polygon is actually visible because it is filled that way. What you really want are two lines stroked. Something like this...
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200">
<polyline points="23,43.8 3.5,22.3 22.3,3 " stroke-width="1" stroke-linecap="round" stroke-linejoin="round" stroke="black" fill="none"/>
</svg>

Related

how to anikmate this svg while scrollling?

<svg class="desktop-img" xmlns="http://www.w3.org/2000/svg" width="821.334" height="509.375" viewBox="0 0 821.334 509.375" preserveAspectRatio="true" version="1.1">
<path id="Path_244" class="path" data-name="Path 244" d="M-15596.515,315.963s-64.138,86.644-155.208,86.033-153.659-47.666-263.047-49.682-212.582,34.27-284.648,148.329-38.8,246.323-38.8,246.323" transform="translate(16375.888 -274.001)" fill="none" stroke="#ef404a" stroke-linecap="round" stroke-linejoin="round" stroke-width="60" ></path>
</svg>
Want animate this curve while scrolling

svg overlaps through other svgs - how to make SVG not being transparent?

I use this SVG in the animation but you can see other SVG in the background through this car, is it because it is transparent?
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g transform="translate(1 1)">
<g>
<g>
<path d="M101.4,314.733c-9.387,0-17.067,7.68-17.067,17.067s7.68,17.067,17.067,17.067c9.387,0,17.067-7.68,17.067-17.067
S110.787,314.733,101.4,314.733z"/>
<path d="M408.6,314.733c-9.387,0-17.067,7.68-17.067,17.067s7.68,17.067,17.067,17.067s17.067-7.68,17.067-17.067
S417.987,314.733,408.6,314.733z"/>
<path d="M297.667,255H255c-5.12,0-8.533,3.413-8.533,8.533s3.413,8.533,8.533,8.533h34.133v8.533c0,5.12,3.413,8.533,8.533,8.533
s8.533-3.413,8.533-8.533v-17.067C306.2,258.413,302.787,255,297.667,255z"/>
<path d="M483.693,212.333H403.48l-91.307-91.307c-3.413-3.413-8.533-3.413-11.947,0s-3.413,8.533,0,11.947l79.36,79.36h-81.92
v-25.6c0-5.12-3.413-8.533-8.533-8.533s-8.533,3.413-8.533,8.533v25.6h-59.733v-25.6c0-5.12-3.413-8.533-8.533-8.533
c-5.12,0-8.533,3.413-8.533,8.533v25.6h-59.733V178.2c0-14.507-11.093-25.6-25.6-25.6s-25.6,11.093-25.6,25.6v34.133h-66.56
C10.947,212.333-1,224.28-1,239.64v73.387c0,15.36,11.947,27.307,27.307,27.307h15.963c4.075,29.155,28.753,51.2,59.131,51.2
c30.378,0,55.056-22.045,59.131-51.2h188.938c4.075,29.155,28.753,51.2,59.131,51.2s55.056-22.045,59.131-51.2h15.963
c15.36,0,27.307-11.947,27.307-27.307V239.64C511,224.28,499.053,212.333,483.693,212.333z M109.933,178.2
c0-5.12,3.413-8.533,8.533-8.533S127,173.08,127,178.2v34.133h-17.067V178.2z M101.4,374.467
c-23.893,0-42.667-18.773-42.667-42.667c0-23.893,18.773-42.667,42.667-42.667c23.893,0,42.667,18.773,42.667,42.667
C144.067,355.693,125.293,374.467,101.4,374.467z M408.6,374.467c-23.893,0-42.667-18.773-42.667-42.667
c0-23.893,18.773-42.667,42.667-42.667c23.893,0,42.667,18.773,42.667,42.667C451.267,355.693,432.493,374.467,408.6,374.467z
M483.693,323.267h-15.963c-4.075-29.155-28.753-51.2-59.131-51.2c-0.138,0-0.274,0.009-0.412,0.01
c-0.148-0.001-0.294-0.01-0.441-0.01c-29.867,0-54.613,22.187-58.88,51.2H160.531c-3.821-27.339-25.761-48.416-53.528-50.936
c-0.203-0.019-0.409-0.029-0.613-0.046c-0.699-0.056-1.397-0.114-2.103-0.147c-0.957-0.046-1.919-0.072-2.887-0.072
s-1.93,0.026-2.887,0.072c-0.706,0.033-1.404,0.09-2.103,0.147c-0.204,0.017-0.41,0.027-0.613,0.046
c-27.767,2.52-49.707,23.597-53.528,50.936H26.307c-5.973,0-10.24-4.267-10.24-10.24V280.6h25.6c5.12,0,8.533-3.413,8.533-8.533
s-3.413-8.533-8.533-8.533h-25.6V239.64c0-5.973,4.267-10.24,10.24-10.24h66.56v0h51.2v0h68.265c0,0,0.001,0,0.001,0
s0.001,0,0.001,0h76.797c0,0,0.001,0,0.001,0s0.001,0,0.001,0h110.93c0,0,0.001,0,0.001,0s0.001,0,0.001,0h83.625
c5.973,0,10.24,4.267,10.24,10.24v23.893h-25.6c-5.12,0-8.533,3.413-8.533,8.533s3.413,8.533,8.533,8.533h25.6v32.427
C493.933,319,489.667,323.267,483.693,323.267z"/>
</g>
</g>
</g>
</svg>
https://www.svgrepo.com/svg/180002/car-transport
If I set the background color, the whole SVG will be in color, not just the car....
this is mind-boggling to me, what to do?

You have to duplicate the part of the path that draws the outside shape and draw it first as an underlay with a fill of white & a fill-rule: non-zero.
svg {
background: grey;
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" >
<g transform="translate(1 1)">
<g stroke="none" stroke-width="5">
<path fill="white" fill-rule="nonzero" d="M109.933,178.2
c0-5.12,3.413-8.533,8.533-8.533S127,173.08,127,178.2v34.133h-17.067V178.2z M101.4,374.467
c-23.893,0-42.667-18.773-42.667-42.667c0-23.893,18.773-42.667,42.667-42.667c23.893,0,42.667,18.773,42.667,42.667
C144.067,355.693,125.293,374.467,101.4,374.467z M408.6,374.467c-23.893,0-42.667-18.773-42.667-42.667
c0-23.893,18.773-42.667,42.667-42.667c23.893,0,42.667,18.773,42.667,42.667C451.267,355.693,432.493,374.467,408.6,374.467z
M483.693,323.267h-15.963c-4.075-29.155-28.753-51.2-59.131-51.2c-0.138,0-0.274,0.009-0.412,0.01
c-0.148-0.001-0.294-0.01-0.441-0.01c-29.867,0-54.613,22.187-58.88,51.2H160.531c-3.821-27.339-25.761-48.416-53.528-50.936
c-0.203-0.019-0.409-0.029-0.613-0.046c-0.699-0.056-1.397-0.114-2.103-0.147c-0.957-0.046-1.919-0.072-2.887-0.072
s-1.93,0.026-2.887,0.072c-0.706,0.033-1.404,0.09-2.103,0.147c-0.204,0.017-0.41,0.027-0.613,0.046
c-27.767,2.52-49.707,23.597-53.528,50.936H26.307c-5.973,0-10.24-4.267-10.24-10.24V280.6h25.6c5.12,0,8.533-3.413,8.533-8.533
s-3.413-8.533-8.533-8.533h-25.6V239.64c0-5.973,4.267-10.24,10.24-10.24h66.56v0h51.2v0h68.265c0,0,0.001,0,0.001,0
s0.001,0,0.001,0h76.797c0,0,0.001,0,0.001,0s0.001,0,0.001,0h110.93c0,0,0.001,0,0.001,0s0.001,0,0.001,0h83.625
c5.973,0,10.24,4.267,10.24,10.24v23.893h-25.6c-5.12,0-8.533,3.413-8.533,8.533s3.413,8.533,8.533,8.533h25.6v32.427
C493.933,319,489.667,323.267,483.693,323.267z"/>
</g>
<path d="M101.4,314.733c-9.387,0-17.067,7.68-17.067,17.067s7.68,17.067,17.067,17.067c9.387,0,17.067-7.68,17.067-17.067
S110.787,314.733,101.4,314.733z"/>
<path d="M408.6,314.733c-9.387,0-17.067,7.68-17.067,17.067s7.68,17.067,17.067,17.067s17.067-7.68,17.067-17.067
S417.987,314.733,408.6,314.733z"/>
<path d="M297.667,255H255c-5.12,0-8.533,3.413-8.533,8.533s3.413,8.533,8.533,8.533h34.133v8.533c0,5.12,3.413,8.533,8.533,8.533
s8.533-3.413,8.533-8.533v-17.067C306.2,258.413,302.787,255,297.667,255z"/>
<path d="M483.693,212.333H403.48l-91.307-91.307c-3.413-3.413-8.533-3.413-11.947,0s-3.413,8.533,0,11.947l79.36,79.36h-81.92
v-25.6c0-5.12-3.413-8.533-8.533-8.533s-8.533,3.413-8.533,8.533v25.6h-59.733v-25.6c0-5.12-3.413-8.533-8.533-8.533
c-5.12,0-8.533,3.413-8.533,8.533v25.6h-59.733V178.2c0-14.507-11.093-25.6-25.6-25.6s-25.6,11.093-25.6,25.6v34.133h-66.56
C10.947,212.333-1,224.28-1,239.64v73.387c0,15.36,11.947,27.307,27.307,27.307h15.963c4.075,29.155,28.753,51.2,59.131,51.2
c30.378,0,55.056-22.045,59.131-51.2h188.938c4.075,29.155,28.753,51.2,59.131,51.2s55.056-22.045,59.131-51.2h15.963
c15.36,0,27.307-11.947,27.307-27.307V239.64C511,224.28,499.053,212.333,483.693,212.333z M109.933,178.2
c0-5.12,3.413-8.533,8.533-8.533S127,173.08,127,178.2v34.133h-17.067V178.2z M101.4,374.467
c-23.893,0-42.667-18.773-42.667-42.667c0-23.893,18.773-42.667,42.667-42.667c23.893,0,42.667,18.773,42.667,42.667
C144.067,355.693,125.293,374.467,101.4,374.467z M408.6,374.467c-23.893,0-42.667-18.773-42.667-42.667
c0-23.893,18.773-42.667,42.667-42.667c23.893,0,42.667,18.773,42.667,42.667C451.267,355.693,432.493,374.467,408.6,374.467z
M483.693,323.267h-15.963c-4.075-29.155-28.753-51.2-59.131-51.2c-0.138,0-0.274,0.009-0.412,0.01
c-0.148-0.001-0.294-0.01-0.441-0.01c-29.867,0-54.613,22.187-58.88,51.2H160.531c-3.821-27.339-25.761-48.416-53.528-50.936
c-0.203-0.019-0.409-0.029-0.613-0.046c-0.699-0.056-1.397-0.114-2.103-0.147c-0.957-0.046-1.919-0.072-2.887-0.072
s-1.93,0.026-2.887,0.072c-0.706,0.033-1.404,0.09-2.103,0.147c-0.204,0.017-0.41,0.027-0.613,0.046
c-27.767,2.52-49.707,23.597-53.528,50.936H26.307c-5.973,0-10.24-4.267-10.24-10.24V280.6h25.6c5.12,0,8.533-3.413,8.533-8.533
s-3.413-8.533-8.533-8.533h-25.6V239.64c0-5.973,4.267-10.24,10.24-10.24h66.56v0h51.2v0h68.265c0,0,0.001,0,0.001,0
s0.001,0,0.001,0h76.797c0,0,0.001,0,0.001,0s0.001,0,0.001,0h110.93c0,0,0.001,0,0.001,0s0.001,0,0.001,0h83.625
c5.973,0,10.24,4.267,10.24,10.24v23.893h-25.6c-5.12,0-8.533,3.413-8.533,8.533s3.413,8.533,8.533,8.533h25.6v32.427
C493.933,319,489.667,323.267,483.693,323.267z"/>
</g>
</svg>

Yes that image has no background; as you can see in F12 Developer tools
A background color will fill... the whole background
You can't paint only the car body because the SVG path doesn't allow it
Styling the path:
results in:

Two SVGs combined together

I have two SVG's. One just draws a grey circle, the second is a dog paw print. I'm really not good with SVGs and have no idea about combining the two so that the paw print is inside the circle. I have tried various approaches, the circle remains however the paw print is either hidden or just not shown.
<svg class="" version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"><path fill="#908473" d="M11.948,0C5.36,0,0,5.36,0,11.948c0,6.588,5.36,11.948,11.948,11.948s11.948-5.36,11.948-11.948C23.897,5.36,18.537,0,11.948,0z M11.948,22.447c-5.789,0-10.499-4.71-10.499-10.499S6.159,1.45,11.948,1.45s10.499,4.71,10.499,10.498S17.737,22.447,11.948,22.447z"></path>
</svg>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="25" height="25" viewBox="0 0 551.062 551.062" style="enable-background:new 0 0 551.062 551.062;"
xml:space="preserve">
<path d="M465.19,453.459c14.749,67.688-58.752,82.375-91.127,73.562s-98.41-10.281-98.41-10.281s-66.218,1.469-98.593,10.281
c-32.375,8.874-105.937-5.875-91.249-73.562s79.438-64.75,97.186-155.999c17.687-91.249,92.718-85.374,92.718-85.374
s74.847-5.875,92.535,85.374C385.875,388.709,450.502,385.771,465.19,453.459z M343.586,206.15
c39.841,11.505,83.844-19.951,98.349-70.258c14.504-50.245-5.998-100.307-45.839-111.812
c-39.842-11.506-83.844,19.951-98.349,70.258C283.243,144.583,303.745,194.645,343.586,206.15z M508.703,187.852
c-38.372-15.668-85.496,10.894-105.264,59.363c-19.768,48.471-4.712,100.43,33.66,116.035
c38.372,15.606,85.496-10.894,105.264-59.364C562.131,255.416,547.076,203.519,508.703,187.852z M207.416,206.15
c39.841-11.506,60.343-61.567,45.839-111.812s-58.568-81.702-98.349-70.196c-39.78,11.505-60.343,61.566-45.839,111.812
C123.572,186.199,167.575,217.655,207.416,206.15z M113.963,363.25c38.373-15.667,53.428-67.626,33.66-116.035
s-66.892-75.031-105.264-59.363C3.987,203.519-11.068,255.478,8.7,303.886C28.467,352.356,75.591,378.917,113.963,363.25z"/>
</svg>

The solution to your problem is using the paw as a symbol. For the symbol you need to use the same viewBox as the original svg element: viewBox="0 0 551.062 551.062" in this case. Now you can use the symbol and you can give the use element the position (x,y) and the size (width, height) you want.
<svg id="circle" version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
<defs>
<symbol id="paw" viewBox="0 0 551.062 551.062" >
<path d="M465.19,453.459c14.749,67.688-58.752,82.375-91.127,73.562s-98.41-10.281-98.41-10.281s-66.218,1.469-98.593,10.281
c-32.375,8.874-105.937-5.875-91.249-73.562s79.438-64.75,97.186-155.999c17.687-91.249,92.718-85.374,92.718-85.374
s74.847-5.875,92.535,85.374C385.875,388.709,450.502,385.771,465.19,453.459z M343.586,206.15
c39.841,11.505,83.844-19.951,98.349-70.258c14.504-50.245-5.998-100.307-45.839-111.812
c-39.842-11.506-83.844,19.951-98.349,70.258C283.243,144.583,303.745,194.645,343.586,206.15z M508.703,187.852
c-38.372-15.668-85.496,10.894-105.264,59.363c-19.768,48.471-4.712,100.43,33.66,116.035
c38.372,15.606,85.496-10.894,105.264-59.364C562.131,255.416,547.076,203.519,508.703,187.852z M207.416,206.15
c39.841-11.506,60.343-61.567,45.839-111.812s-58.568-81.702-98.349-70.196c-39.78,11.505-60.343,61.566-45.839,111.812
C123.572,186.199,167.575,217.655,207.416,206.15z M113.963,363.25c38.373-15.667,53.428-67.626,33.66-116.035
s-66.892-75.031-105.264-59.363C3.987,203.519-11.068,255.478,8.7,303.886C28.467,352.356,75.591,378.917,113.963,363.25z"/>
</symbol>
</defs>
<path fill="#908473" d="M11.948,0C5.36,0,0,5.36,0,11.948c0,6.588,5.36,11.948,11.948,11.948s11.948-5.36,11.948-11.948C23.897,5.36,18.537,0,11.948,0z M11.948,22.447c-5.789,0-10.499-4.71-10.499-10.499S6.159,1.45,11.948,1.45s10.499,4.71,10.499,10.498S17.737,22.447,11.948,22.447z"></path>
<use xlink:href="#paw" x="2" y="2" width="20" height="20" />
</svg>

Rotate circle and position arc over it with start and end angle

Hi is there any way to design the below picture with SVG or any other way?
Please find the SVG Code for the circle with head
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="110px" height="110px" viewBox="0 0 110 110" enable-background="new 0 0 110 110" xml:space="preserve">
<g>
<title>Sample</title>
<g>
<path d="M60.391,23.712V0H48.975v23.571c-21.802,2.619-37.87,20.953-37.87,43.041c0,23.995,19.536,43.391,43.411,43.391
c23.855,0,43.392-19.396,43.392-43.391C97.907,44.736,81.202,26.543,60.391,23.712z M22.501,66.682
c0-17.628,14.369-31.998,32.015-31.998c17.626,0,31.995,14.37,31.995,31.998c0,17.625-14.299,32.065-31.995,32.065
C36.8,98.747,22.501,84.307,22.501,66.682z"/>
</g>
Head
Based on the head angle in the example 332° the circle should rotate
Red Arc
Based on the start and end position of the arc it should start from there with displaying the start and end position as in the picture 50 and 180.
Please help me to design :-)

Try this i used rect and circle instead of path
svg{
background:#223D50;
}
<svg width="100%" height="100%" viewbox="0 0 100 100">
<rect x="40" y="30" width="3" height="12" fill="grey" transform="rotate(-28 42 50)"/>
<circle cx="42" cy="53" r="10" stroke-width="3" stroke="grey" fill="none"/>
<circle cx="42" cy="53" r="18" fill="transparent" stroke-width="5" stroke="red" stroke-dasharray="36.11111% 100%" stroke-dashoffset="0" transform="rotate(-30 42, 53)"/>
<text x="36" y="55" fill="white" font-size="5">Check</text>
</svg>

SVG Animation on a ring outside of an icon

I am trying to animate the outer ring of an SVG. Since it's not filled circle, I can't change the element and spell it out with cx and cy and then change it via the animateTransform in the code.
What I' trying to do is make the outer ring "pulse" by going from 100% down to 80% then back up to 100%. I can make the entire SVG animate changing the scale="1 1" to scale=".8 .8" but that scales the whole SVG and from the upper left corner. Any thoughts on how to animate just the outer ring? I generate my SVG using Illustrator which doesn't make clean SVG. Any help is much appreciated.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!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="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<g>
<g>
<path fill="#00AEEF" d="M4.5,25.1c0-1.9,0.3-3.7,0.7-5.4c0.5-1.7,1.2-3.4,2.1-4.9s2-2.9,3.2-4.2s2.6-2.3,4.2-3.2
c1.5-0.9,3.2-1.6,4.9-2.1c1.8-0.5,3.6-0.8,5.4-0.8c1.9,0,3.7,0.2,5.4,0.7c1.8,0.6,3.4,1.3,4.9,2.2s2.9,2,4.2,3.2
c1.3,1.3,2.3,2.6,3.2,4.2c0.9,1.5,1.6,3.1,2.1,4.9c0.5,1.7,0.7,3.5,0.7,5.4s-0.2,3.7-0.7,5.4c-0.5,1.7-1.2,3.4-2.1,4.9
c-0.9,1.5-2,2.9-3.2,4.2c-1.3,1.2-2.7,2.2-4.2,3.1s-3.2,1.6-4.9,2.1c-1.7,0.5-3.5,0.7-5.4,0.7s-3.7-0.2-5.4-0.7
c-1.7-0.5-3.4-1.2-4.9-2.1c-1.5-0.9-2.9-2-4.2-3.2c-1.2-1.3-2.3-2.6-3.2-4.1s-1.6-3.1-2.1-4.9C4.8,28.7,4.5,26.9,4.5,25.1z
M6.4,25c0,1.7,0.2,3.3,0.7,4.9C7.5,31.5,8.2,33,9,34.3c0.8,1.4,1.8,2.6,2.9,3.8c1.1,1.1,2.4,2.1,3.8,2.9c1.4,0.8,2.9,1.4,4.4,1.9
c1.6,0.4,3.2,0.7,4.9,0.7c1.7,0,3.3-0.2,4.9-0.7c1.6-0.4,3.1-1.1,4.4-1.9c1.4-0.8,2.6-1.8,3.8-2.9c1.1-1.1,2.1-2.4,2.9-3.8
c0.8-1.4,1.4-2.9,1.9-4.4c0.5-1.6,0.7-3.2,0.7-4.9c0-1.7-0.2-3.3-0.7-4.9S41.8,17,41,15.7c-0.8-1.4-1.8-2.6-2.9-3.8
C37,10.8,35.7,9.8,34.3,9s-2.9-1.4-4.4-1.9c-1.6-0.5-3.2-0.7-4.9-0.7c-2.5,0-4.9,0.5-7.2,1.5s-4.2,2.3-5.9,4c-1.7,1.7-3,3.7-4,5.9
C6.9,20.1,6.4,22.5,6.4,25z"/>
</g>
<path id="pattern_3_" fill="#00AEEF" d="M15,35h10v-1.4H15V35z M16.4,15H15v10h1.4V15z M15,31.4h10V30H15V31.4z M15,27.9h10v-1.4
H15V27.9z M23.6,15h-1.4v10h1.4V15z M20,15h-1.4v10H20V15z M25,15v1.4h10V15H25z M25,20h10v-1.4H25V20z M25,23.6h10v-1.4H25V23.6z
M30,35h1.4V25H30V35z M33.6,35H35V25h-1.4V35z M26.4,35h1.4V25h-1.4V35z"/>
</g>
</svg>

The simplest solution would be to convert your outer circle back to a thick line. The equivalent circle would be:
<circle cx="25" cy="25" r="19.5" stroke-width="2" fill="none" stroke="#00AEEF"/>
Then you can just animate the radius.
<circle cx="25" cy="25" r="19.5" stroke-width="2" fill="none" stroke="#00AEEF">
<animate attributeName="r" values="19.5; 15.6; 19.5" dur="1s" repeatCount="indefinite"/>
</circle>
The final working demo is as follows:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<g>
<g>
<circle cx="25" cy="25" r="19.5" stroke-width="2" fill="none" stroke="#00AEEF">
<animate attributeName="r" values="19.5; 15.6; 19.5" dur="1s" repeatCount="indefinite"/>
</circle>
</g>
<path id="pattern_3_" fill="#00AEEF" d="M15,35h10v-1.4H15V35z M16.4,15H15v10h1.4V15z M15,31.4h10V30H15V31.4z M15,27.9h10v-1.4
H15V27.9z M23.6,15h-1.4v10h1.4V15z M20,15h-1.4v10H20V15z M25,15v1.4h10V15H25z M25,20h10v-1.4H25V20z M25,23.6h10v-1.4H25V23.6z
M30,35h1.4V25H30V35z M33.6,35H35V25h-1.4V35z M26.4,35h1.4V25h-1.4V35z"/>
</g>
</svg>

It's quite easy to do this with css transform animations. Insert '-webkit-', '-moz-' and '-ms-' prefixes if needed.
#keyframes pulse {
0% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
#ring {
animation-name: pulse;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
transform-origin: center;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50">
<path id="ring" fill="#00AEEF" d="M4.5,25.1c0-1.9,0.3-3.7,0.7-5.4c0.5-1.7,1.2-3.4,2.1-4.9s2-2.9,3.2-4.2s2.6-2.3,4.2-3.2
c1.5-0.9,3.2-1.6,4.9-2.1c1.8-0.5,3.6-0.8,5.4-0.8c1.9,0,3.7,0.2,5.4,0.7c1.8,0.6,3.4,1.3,4.9,2.2s2.9,2,4.2,3.2
c1.3,1.3,2.3,2.6,3.2,4.2c0.9,1.5,1.6,3.1,2.1,4.9c0.5,1.7,0.7,3.5,0.7,5.4s-0.2,3.7-0.7,5.4c-0.5,1.7-1.2,3.4-2.1,4.9
c-0.9,1.5-2,2.9-3.2,4.2c-1.3,1.2-2.7,2.2-4.2,3.1s-3.2,1.6-4.9,2.1c-1.7,0.5-3.5,0.7-5.4,0.7s-3.7-0.2-5.4-0.7
c-1.7-0.5-3.4-1.2-4.9-2.1c-1.5-0.9-2.9-2-4.2-3.2c-1.2-1.3-2.3-2.6-3.2-4.1s-1.6-3.1-2.1-4.9C4.8,28.7,4.5,26.9,4.5,25.1z
M6.4,25c0,1.7,0.2,3.3,0.7,4.9C7.5,31.5,8.2,33,9,34.3c0.8,1.4,1.8,2.6,2.9,3.8c1.1,1.1,2.4,2.1,3.8,2.9c1.4,0.8,2.9,1.4,4.4,1.9
c1.6,0.4,3.2,0.7,4.9,0.7c1.7,0,3.3-0.2,4.9-0.7c1.6-0.4,3.1-1.1,4.4-1.9c1.4-0.8,2.6-1.8,3.8-2.9c1.1-1.1,2.1-2.4,2.9-3.8
c0.8-1.4,1.4-2.9,1.9-4.4c0.5-1.6,0.7-3.2,0.7-4.9c0-1.7-0.2-3.3-0.7-4.9S41.8,17,41,15.7c-0.8-1.4-1.8-2.6-2.9-3.8
C37,10.8,35.7,9.8,34.3,9s-2.9-1.4-4.4-1.9c-1.6-0.5-3.2-0.7-4.9-0.7c-2.5,0-4.9,0.5-7.2,1.5s-4.2,2.3-5.9,4c-1.7,1.7-3,3.7-4,5.9
C6.9,20.1,6.4,22.5,6.4,25z" />
<path id="pattern_3_" fill="#00AEEF" d="M15,35h10v-1.4H15V35z M16.4,15H15v10h1.4V15z M15,31.4h10V30H15V31.4z M15,27.9h10v-1.4
H15V27.9z M23.6,15h-1.4v10h1.4V15z M20,15h-1.4v10H20V15z M25,15v1.4h10V15H25z M25,20h10v-1.4H25V20z M25,23.6h10v-1.4H25V23.6z
M30,35h1.4V25H30V35z M33.6,35H35V25h-1.4V35z M26.4,35h1.4V25h-1.4V35z" />
</svg>
It's possible to make this work in Firefox too by adding a couple of extra elements to isolate the animation, to emulate what transform-origin does. See fiddle.

Resources