Related
So I have this logo that fits the whole page. Is there anyway that, when the browser is resized I can move these paths? That way the height stays the same?
Example of what I want to achieve
Here's my svg code
<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 1440 52" style="enable-background:new 0 0 1440 52;" xml:space="preserve">
<path d="M1428.4,6.9c-2.5-2.5-6-3.7-10.5-3.7h-7.6h-9.5v19.1H16.3V3.1H7.8v46.8h8.5V30.7h1384.5v19.1h0h9.4V30.6h7.5
c2.3,0,4.3-0.3,6-1c1.8-0.7,3.3-1.7,4.5-2.9c1.2-1.2,2.2-2.7,2.8-4.5c0.7-1.7,1-3.6,1-5.8C1432.2,12.1,1430.9,9.4,1428.4,6.9z
M1421.4,20.1c-1,1-2.8,1.9-5.2,2h-6v-12h6c2.3,0,4,0.6,5.2,1.8s1.7,2.7,1.7,4.4C1423.1,18.5,1421.8,19.8,1421.4,20.1z" />
</svg>
you can do something like this by using preserveAspectRatio="none" for the svg element together with a fixed height and width:100%. This would give tou what you need but the the stroke would be scaled differently on the vertical and horizontal.
To fix it you need to add vector-effect="non-scaling-stroke" for the path.
svg{height:100px; width:100%}
<svg viewBox="0 0 100 20" preserveAspectRatio="none">
<path stroke="black" stroke-width="5" vector-effect="non-scaling-stroke" d="M 1,5V15M1,10H97"/>
</svg>
Yes it is possible, with a bit of trickery. Below is a modified verion of your SVG that behaves how you want.
This matches your SVG exactly, but has a limitation. The trick we are using relies on extending the middle bar a long way to the left. Then covering up the left end of the bar with your vertical piece. But in your original SVG the vertical piece is not right at the left end of your SVG. So I've had to hide some of the extension with a white rectangle. This assumes your background will also be white. If it isn't you'll need to change that white rectangle to be the same colour as your page background.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="52">
<defs>
<path id="middle-and-right" transform="translate(-1440 0)"
d="M1428.4,6.9c-2.5-2.5-6-3.7-10.5-3.7h-7.6h-9.5v19.1
h -3000 v 8.4 h 3000
v19.1h0h9.4V30.6h7.5 c2.3,0,4.3-0.3,6-1c1.8-0.7,3.3-1.7,4.5-2.9c1.2-1.2,2.2-2.7,2.8-4.5c0.7-1.7,1-3.6,1-5.8C1432.2,12.1,1430.9,9.4,1428.4,6.9z
M1421.4,20.1c-1,1-2.8,1.9-5.2,2h-6v-12h6c2.3,0,4,0.6,5.2,1.8s1.7,2.7,1.7,4.4C1423.1,18.5,1421.8,19.8,1421.4,20.1z" />
</defs>
<use xlink:href="#middle-and-right" x="100%"/>
<rect x="-1" y="3.1" width="10" height="46.8" fill="white"/>
<rect x="7.8" y="3.1" width="8.5" height="46.8"/>
</svg>
If you want to get a better idea how the trick works, have a look at this version. I've modified the SVG to make the trick more apparent.
svg {
background-color: red;
overflow: visible;
}
rect {
opacity: 0.5;
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="52">
<defs>
<path id="middle-and-right" transform="translate(-1440 0)"
d="M1428.4,6.9c-2.5-2.5-6-3.7-10.5-3.7h-7.6h-9.5v19.1
h -3000 v 8.4 h 3000
v19.1h0h9.4V30.6h7.5 c2.3,0,4.3-0.3,6-1c1.8-0.7,3.3-1.7,4.5-2.9c1.2-1.2,2.2-2.7,2.8-4.5c0.7-1.7,1-3.6,1-5.8C1432.2,12.1,1430.9,9.4,1428.4,6.9z
M1421.4,20.1c-1,1-2.8,1.9-5.2,2h-6v-12h6c2.3,0,4,0.6,5.2,1.8s1.7,2.7,1.7,4.4C1423.1,18.5,1421.8,19.8,1421.4,20.1z" />
</defs>
<use xlink:href="#middle-and-right" x="100%"/>
<rect x="-1" y="3.1" width="10" height="46.8" fill="white"/>
<rect x="7.8" y="3.1" width="8.5" height="46.8"/>
</svg>
However if you don't mind the vertical piece on the left end being moved so it's hard up against the left side of the SVG, then we can remove that restriction regarding the background. The new version below will work for any page background colour.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="52">
<defs>
<path id="middle-and-right" transform="translate(-1440 0)"
d="M1428.4,6.9c-2.5-2.5-6-3.7-10.5-3.7h-7.6h-9.5v19.1
h -3000 v 8.4 h 3000
v19.1h0h9.4V30.6h7.5 c2.3,0,4.3-0.3,6-1c1.8-0.7,3.3-1.7,4.5-2.9c1.2-1.2,2.2-2.7,2.8-4.5c0.7-1.7,1-3.6,1-5.8C1432.2,12.1,1430.9,9.4,1428.4,6.9z
M1421.4,20.1c-1,1-2.8,1.9-5.2,2h-6v-12h6c2.3,0,4,0.6,5.2,1.8s1.7,2.7,1.7,4.4C1423.1,18.5,1421.8,19.8,1421.4,20.1z" />
</defs>
<use xlink:href="#middle-and-right" x="100%"/>
<rect x="0" y="3.1" width="8.5" height="46.8"/>
</svg>
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:
So I can make the following path, but I need the shape flipped so that the flat joining line (X) is on the bottom. I also need it to stretch the full width of its container.
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path d="M0 0 L30 50 L100 0 Z"></path>
</svg>
With respect to flipping the shape, you can use a transform on the path, scaling the y-axis by -1. This will flip the shape up and "out" of view, so you also need to translate it down. If you want it to end up with exactly the same upper and lower boundaries as pre-flipped (as opposed to, say, at the bottom of its container, etc.) then you have to translate it down by the height of the shape, i.e. 50px in your example.
With respect to wanting it stretched to the full width of its container, the code in your question already contains the answer, i.e. width="100%". This is shown by placing the triangle into a div that is 250px wide. Contrast this with the original shape (on the left) with width of 100 not 100%.
div {
width: 250px;
height: 70px;
border: solid red 2px;
}
original: unflipped, untranslated, unstretched:
<div>
<svg id="bigTriangleColor2" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path transform="translate(0, 0) scale(1, 1)" d="M0 0 L30 50 L100 0 Z"></path>
</svg>
</div>
altered: flipped, translated, stretched:
<div>
<svg id="bigTriangleColor1" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path transform="translate(0, 50) scale(1, -1)" d="M0 0 L30 50 L100 0 Z"></path>
</svg>
</div>
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>
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.