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:
Related
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>
In an svg like this. How can I make it by directly editing this, so the color of the lines is changed to red?
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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 490.034 490.034" style="enable-background:new 0 0 490.034 490.034; fill: #FF0000;" xml:space="preserve">
<g>
<g>
<path d="M435.667,54.311c-7-7.1-18.4-7-25.5,0l-64,64c-79.3-36-163.9-27.2-244.6,25.5c-60.1,39.2-96.6,88.5-98.1,90.6
c-4.8,6.6-4.6,15.6,0.5,22c34.2,42,70,74.7,106.6,97.5l-56.3,56.3c-7,7-7,18.4,0,25.5c3.5,3.5,8.1,5.3,12.7,5.3s9.2-1.8,12.7-5.3
l356-355.9C442.667,72.811,442.667,61.411,435.667,54.311z M200.467,264.011c-2.6-5.9-3.9-12.3-3.9-19c0-12.9,5-25.1,14.2-34.3
c14.4-14.4,35.7-17.8,53.3-10.3L200.467,264.011z M290.667,173.911c-32.7-21-76.8-17.2-105.3,11.3c-16,16-24.7,37.2-24.7,59.7
c0,16.4,4.7,32.1,13.4,45.6l-37.1,37.1c-32.5-18.8-64.5-46.6-95.6-82.9c13.3-15.6,41.4-45.7,79.9-70.8
c66.6-43.4,132.9-52.8,197.5-28.1L290.667,173.911z"/>
</g>
</g>
<g>
<g>
<path d="M486.067,233.611c-24.7-30.4-50.3-56-76.3-76.3c-7.9-6.1-19.2-4.7-25.4,3.1c-6.1,7.8-4.7,19.1,3.1,25.3
c20.6,16.1,41.2,36.1,61.2,59.5c-11.8,13.8-34.8,38.6-66,61.3c-60.1,43.7-120.8,59.5-180.3,46.9c-9.7-2.1-19.3,4.2-21.3,13.9
c-2.1,9.7,4.2,19.3,13.9,21.3c15.5,3.3,31.1,4.9,46.8,4.9c23.6,0,47.4-3.7,71.1-11.1c31.1-9.7,62-25.7,91.9-47.5
c50.4-36.9,80.5-77.6,81.8-79.3C491.367,249.011,491.167,240.011,486.067,233.611z"/>
</g>
</g>
</svg>
You can add "fill: red;" to your style attribute. Like
style="enable-background:new 0 0 490.034 490.034; fill: red;"
You can use any hex value for "red".
I have a svg image which has four paths which draw the perimeters of cuboid figures with curved corners.
I want to fill the interior of these figures. However, the fill="grey" property I am using on the path does not work.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 40" x="0px" y="0px" fill="grey">
<path fill="grey" d="M5,14h6a3,3,0,0,0,3-3V5a3,3,0,0,0-3-3H5A3,3,0,0,0,2,5v6A3,3,0,0,0,5,14ZM4,5A1,1,0,0,1,5,4h6a1,1,0,0,1,1,1v6a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1Z"/>
<path d="M21,14h6a3,3,0,0,0,3-3V5a3,3,0,0,0-3-3H21a3,3,0,0,0-3,3v6A3,3,0,0,0,21,14ZM20,5a1,1,0,0,1,1-1h6a1,1,0,0,1,1,1v6a1,1,0,0,1-1,1H21a1,1,0,0,1-1-1Z"/>
<path d="M2,27a3,3,0,0,0,3,3h6a3,3,0,0,0,3-3V21a3,3,0,0,0-3-3H5a3,3,0,0,0-3,3Zm2-6a1,1,0,0,1,1-1h6a1,1,0,0,1,1,1v6a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1Z"/>
<path d="M18,27a3,3,0,0,0,3,3h6a3,3,0,0,0,3-3V21a3,3,0,0,0-3-3H21a3,3,0,0,0-3,3Zm2-6a1,1,0,0,1,1-1h6a1,1,0,0,1,1,1v6a1,1,0,0,1-1,1H21a1,1,0,0,1-1-1Z"/>
</svg>
Any thoughts on what I need to do to fill in these cuboids?
Thanks
Your paths are filed grey. The problem is that there is a "hole" in in every path. I've removed the "hole
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 40" fill="grey">
<path d="M5,14h6a3,3,0,0,0,3-3V5a3,3,0,0,0-3-3H5A3,3,0,0,0,2,5v6A3,3,0,0,0,5,14Z"/>
<path d="M21,14h6a3,3,0,0,0,3-3V5a3,3,0,0,0-3-3H21a3,3,0,0,0-3,3v6A3,3,0,0,0,21,14Z"/>
<path d="M2,27a3,3,0,0,0,3,3h6a3,3,0,0,0,3-3V21a3,3,0,0,0-3-3H5a3,3,0,0,0-3,3Z"/>
<path d="M18,27a3,3,0,0,0,3,3h6a3,3,0,0,0,3-3V21a3,3,0,0,0-3-3H21a3,3,0,0,0-3,3Z"/>
</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>
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.