Related
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:
Thank you in advance for all the help, I have been trying various resources on the web but is still not able to make this work.
I am trying to create a 3D rectangle box using svg. I prepared the graphic in Adobe Illustrator by apply the 3D feature in the software to a regular rectangle shape and finally exported it as a SVG file. While it looks ok on the screen of illustrator, on browser; the object appears to have a small white border around each of its polygon.
The following is the svg code generated by illustrator. You Can see the whitespace around the polygon after running the snippet. I have to remove the whitespace around it.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, 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"
width="965px" height="720.3px" viewBox="0 0 965 720.3" enable-background="new 0 0 965 720.3" xml:space="preserve">
<g id="sections_2_">
<g>
<g enable-background="new ">
<g>
<polygon fill="#836EA6" points="595.6,337.1 596.8,344.9 581.8,357.8 580.6,349.9 "/>
</g>
<g>
<polygon fill="#8670A9" points="532,311.5 595.6,337.1 580.6,349.9 568.3,360.1 "/>
</g>
<g>
<polygon fill="#736092" points="568.3,360.1 569.4,368 533.1,319.3 532,311.5 "/>
</g>
<g>
<polygon fill="#BF4142" points="568.3,360.1 569.4,368 508,340.3 506.9,332.5 "/>
</g>
<g>
<polygon fill="#836EA6" points="580.6,349.9 581.8,357.8 569.4,368 568.3,360.1 "/>
</g>
<g>
<polygon fill="#DE4D4E" points="531.9,311.5 568.3,360.1 506.9,332.5 511.7,328.6 524.8,317.8 "/>
</g>
</g>
</g>
</g>
</svg>
The following image is how it look like on the screen which is the desired look. It has to be a .svg file, so exporting it as jpeg or png is not an option.
That white space is because your SVG viewBox attribute is set to an area much bigger than your design.
You can think of the viewBox in SVG as defining the page size. In Illustrator, that corresponds to what it calls the "Artboard".
Before you save in Illustrator, go to the Artboard settings (where you set the page size) and choose the option "Fit to Artwork Bounds". Now when you save, the viewBox should match the size of your design, and the white space should be gone.
Adjust the viewBox to get rid of the whitespace. I've added a black background rect so the whitespace around the shape is visible but you can remove that.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, 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"
width="400px" height="200.3px" viewBox="502 307 98 63" enable-background="new 0 0 965 720.3" xml:space="preserve" overflow="hidden">
<rect x="502" y="307" width="98" height="63"/>
<g id="sections_2_">
<g>
<g enable-background="new ">
<g>
<polygon fill="#836EA6" points="595.6,337.1 596.8,344.9 581.8,357.8 580.6,349.9 "/>
</g>
<g>
<polygon fill="#8670A9" points="532,311.5 595.6,337.1 580.6,349.9 568.3,360.1 "/>
</g>
<g>
<polygon fill="#736092" points="568.3,360.1 569.4,368 533.1,319.3 532,311.5 "/>
</g>
<g>
<polygon fill="#BF4142" points="568.3,360.1 569.4,368 508,340.3 506.9,332.5 "/>
</g>
<g>
<polygon fill="#836EA6" points="580.6,349.9 581.8,357.8 569.4,368 568.3,360.1 "/>
</g>
<g>
<polygon fill="#DE4D4E" points="531.9,311.5 568.3,360.1 506.9,332.5 511.7,328.6 524.8,317.8 "/>
</g>
</g>
</g>
</g>
</svg>
I have this SVG file:
<?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="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<g id="main">
<clipPath id="clip_mask">
<path d="M20.9262,32C18.5189,30.6,16.9,27.9878,16.9,25c0,-4.4735,3.6265,-8.1,8.1,-8.1c2.9878,0,5.6,1.6189,7,4.0262V0L0,0l0,32H20.9262z" fill-rule="evenodd"/>
</clipPath>
<g id="icon" clip-path="url(#clip_mask)">
<g id="transformed_icon" transform="translate(-1 -1)">
<path d="M26.7,30.5H5.3c-0.4418,0,-0.8,-0.3582,-0.8,-0.8V2.3c0,-0.4418,0.3582,-0.8,0.8,-0.8h21.4c0.4418,0,0.8,0.3582,0.8,0.8v27.4C27.5,30.1418,27.1418,30.5,26.7,30.5z" fill="#FFFFFF" stroke="#6D6E71" stroke-width="1" stroke-miterlimit="1"/>
<path d="M8.5,8.5h15M8.5,11.5h15M8.5,14.5h15M8.5,17.5h15M8.5,20.5h15M8.5,23.5h15" fill="none" stroke="#3E79B4" stroke-width="1" stroke-linecap="round" stroke-miterlimit="1"/>
</g>
</g>
<g id="overlay">
<path d="M25,18c-3.866,0,-7,3.134,-7,7c0,3.866,3.134,7,7,7s7,-3.134,7,-7C32,21.134,28.866,18,25,18zM26,29.8c0,0.1105,-0.0895,0.2,-0.2,0.2h-1.6c-0.1105,0,-0.2,-0.0895,-0.2,-0.2v-6.6c0,-0.1105,0.0895,-0.2,0.2,-0.2h1.6c0.1105,0,0.2,0.0895,0.2,0.2V29.8zM26,21.5c0,0.1105,-0.0895,0.2,-0.2,0.2h-1.6c-0.1105,0,-0.2,-0.0895,-0.2,-0.2v-1.3c0,-0.1105,0.0895,-0.2,0.2,-0.2h1.6c0.1105,0,0.2,0.0895,0.2,0.2V21.5z" fill-rule="evenodd" fill="#3E79B4"/>
<path d="M26,20.2c0,-0.1105,-0.0895,-0.2,-0.2,-0.2h-1.6c-0.1105,0,-0.2,0.0895,-0.2,0.2v1.3c0,0.1105,0.0895,0.2,0.2,0.2h1.6c0.1105,0,0.2,-0.0895,0.2,-0.2V20.2z" fill="#FFFFFF"/>
<path d="M26,23.2c0,-0.1105,-0.0895,-0.2,-0.2,-0.2h-1.6c-0.1105,0,-0.2,0.0895,-0.2,0.2v6.6c0,0.1105,0.0895,0.2,0.2,0.2h1.6c0.1105,0,0.2,-0.0895,0.2,-0.2V23.2z" fill="#FFFFFF"/>
</g>
</g>
</svg>
It is an icon with an overlay in the bottom-right corner. There is a clip-gap between the main icon area and the overlay area. This clip-gap is displayed correctly in Affinity Designer 1.5.3.69:
But unfortunately, many other programs don't recognize the clip-gap, so they don't display it. For example, here is a screenshot from LibreOffice Draw:
So, is it possible to "flatten" the clipped area in the SVG to the same background transparency as the icon background? This would make the SVG clip-gap visible and transparent in such incompatible programs and would allow programs which don't support clipped areas in SVG to render the clipped area as transparency.
I've found a practical but cumbersome and time-consuming solution: Since the SVG is displayed correctly in Affinity Designer, I print the SVG in Affinity Designer to a PDF printer driver. Then I reimport the PDF in Affinity Designer and export it as SVG. Then I can import the SVG in a renderer which doesn't support clipping and it is rendered perfectly. It works.
Yes it is possible to re-use a clip shape to make the clipped area transparent using a filter. However, I very much doubt that a renderer that can't handle clipping properly will be able to handle a filter. But here's how you would do that:
<?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="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<defs>
<clipPath id="clip_mask">
<path id="original-clip-shape" d="M20.9262,32C18.5189,30.6,16.9,27.9878,16.9,25c0,-4.4735,3.6265,-8.1,8.1,-8.1c2.9878,0,5.6,1.6189,7,4.0262V0L0,0l0,32H20.9262z" fill-rule="evenodd"/>
</clipPath>
<filter id="transparentize">
<feImage xlink:href="#original-clip-shape" x="0" y="0"/>
<feComposite operator="in" in="SourceGraphic"/>
</filter>
</defs>
<g id="main">
<g id="icon" clip-path="url(#clip_mask)">
<g id="filter-layer" filter="url(#transparentize)">
<g id="transformed_icon" transform="translate(-1 -1)">
<path d="M26.7,30.5H5.3c-0.4418,0,-0.8,-0.3582,-0.8,-0.8V2.3c0,-0.4418,0.3582,-0.8,0.8,-0.8h21.4c0.4418,0,0.8,0.3582,0.8,0.8v27.4C27.5,30.1418,27.1418,30.5,26.7,30.5z" fill="#FFFFFF" stroke="#6D6E71" stroke-width="1" stroke-miterlimit="1"/>
<path d="M8.5,8.5h15M8.5,11.5h15M8.5,14.5h15M8.5,17.5h15M8.5,20.5h15M8.5,23.5h15" fill="none" stroke="#3E79B4" stroke-width="1" stroke-linecap="round" stroke-miterlimit="1"/>
</g>
</g>
</g>
<g id="overlay">
<path d="M25,18c-3.866,0,-7,3.134,-7,7c0,3.866,3.134,7,7,7s7,-3.134,7,-7C32,21.134,28.866,18,25,18zM26,29.8c0,0.1105,-0.0895,0.2,-0.2,0.2h-1.6c-0.1105,0,-0.2,-0.0895,-0.2,-0.2v-6.6c0,-0.1105,0.0895,-0.2,0.2,-0.2h1.6c0.1105,0,0.2,0.0895,0.2,0.2V29.8zM26,21.5c0,0.1105,-0.0895,0.2,-0.2,0.2h-1.6c-0.1105,0,-0.2,-0.0895,-0.2,-0.2v-1.3c0,-0.1105,0.0895,-0.2,0.2,-0.2h1.6c0.1105,0,0.2,0.0895,0.2,0.2V21.5z" fill-rule="evenodd" fill="#3E79B4"/>
<path d="M26,20.2c0,-0.1105,-0.0895,-0.2,-0.2,-0.2h-1.6c-0.1105,0,-0.2,0.0895,-0.2,0.2v1.3c0,0.1105,0.0895,0.2,0.2,0.2h1.6c0.1105,0,0.2,-0.0895,0.2,-0.2V20.2z" fill="#FFFFFF"/>
<path d="M26,23.2c0,-0.1105,-0.0895,-0.2,-0.2,-0.2h-1.6c-0.1105,0,-0.2,0.0895,-0.2,0.2v6.6c0,0.1105,0.0895,0.2,0.2,0.2h1.6c0.1105,0,0.2,-0.0895,0.2,-0.2V23.2z" fill="#FFFFFF"/>
</g>
</g>
</svg>
As far as workarounds go, it's hard to debug renderer specific problems without the renderer. But here are some thoughts:
It might support clipping but just not support using the stroke as a clip. You could work around this by using a solid circle as the clip-shape.
it might support masking not clipping. In this case, define a mask that's the inverse of the clip and apply that.
it might not support clipping or masking at all. In that case, you'll have to just draw the original content as if it was being clipped using markers to shape the ends of your paths. (ugh!)
I'm trying to reuse an SVG sprite icone into new SVG object.
The new object is just a circle that contains the icon from the sprite.
I understand that I need to use the defs tag to group some shapes together,
But i have have a problem referencing my sprite icone inside the defs tag.
sprite:
<svg style="display:none;">
<symbol id="icon_1" viewBox="0 0 54 54">
<path d="M10.6 29.3h14.5V44H10.6z" class="st0"/>
<path d="M25 29.3h14.5V44H25zm-7.2-14.7h14.5v14.7H17.8zm0 0l3.9-4m10.6 4l3.9-4m-3.9 18l3.9-3.7m-25.6 4.4l4.3-4.4m24.6 4.7l3.9-4M39.5 44l3.9-4M21.2 10.6h15M14.5 24.9h3.3m17.7.6h7.9M36.2 10v15.5m7.2.1V40" class="st0"/>
</symbol >
new object:
<svg><defs>
<g id="shape">
<circle cx="40" cy="40" r="40" fill="rgba(124,240,10,0.5)" />
<image x="0" y="0" xlink:href="#icon_1"></image>
</g>
I read that i can use image tags to reference SVG elements.
obviously i'm doing something wrong.
Basically the expected result should be a stroked circle with the icon inside
in a way that I will be able to animate the entire object
Thanks
You were close. Your main problem was that you were careless with your opening and closing tags.
Your second SVG had a stray opening <defs> element, which meant that the <g id="shape"> element was left inside the <defs> section. <defs> is for defining elements to be re-used later, and anything in a <defs> will only be drawn when referenced from elsewhere.
There were a couple of other problems.
You can't use an <image> to reference a symbol. You will need to use a <use> for that.
You will need to supply a width and height so that the symbol gets draw at an appropriate size.
<svg width="0" height="0">
<defs>
<symbol id="icon_1" viewBox="0 0 54 54">
<path d="M10.6 29.3h14.5V44H10.6z" class="st0"/>
<path d="M25 29.3h14.5V44H25zm-7.2-14.7h14.5v14.7H17.8zm0 0l3.9-4m10.6 4l3.9-4m-3.9 18l3.9-3.7m-25.6 4.4l4.3-4.4m24.6 4.7l3.9-4M39.5 44l3.9-4M21.2 10.6h15M14.5 24.9h3.3m17.7.6h7.9M36.2 10v15.5m7.2.1V40" class="st0"/>
</symbol>
</defs>
</svg>
new object:
<svg>
<g id="shape">
<circle cx="40" cy="40" r="40" fill="rgba(124,240,10,0.5)" />
<use x="0" y="0" width="80" height="80" xlink:href="#icon_1"></use>
</g>
</svg>
The image tag is designed to be used with complete images, not fractions. I guess that use is the right tag for your use case.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1">
<symbol id="icon_1" viewBox="0 0 54 54">
<path d="M10.6 29.3h14.5V44H10.6z" class="st0"/>
<path d="M25 29.3h14.5V44H25zm-7.2-14.7h14.5v14.7H17.8zm0 0l3.9-4m10.6 4l3.9-4m-3.9 18l3.9-3.7m-25.6 4.4l4.3-4.4m24.6 4.7l3.9-4M39.5 44l3.9-4M21.2 10.6h15M14.5 24.9h3.3m17.7.6h7.9M36.2 10v15.5m7.2.1V40" class="st0"/>
</symbol>
<defs>
<g id="shape">
<circle cx="40" cy="40" r="40" fill="rgba(124,240,10,0.5)" />
<use x="2" y="-3" width="80" height="80" xlink:href="#icon_1"/>
</g>
</defs>
<use xlink:href="#shape"/>
</svg>
Also, if the sprite is in a separate file, you have to reference the symbol within that file: <use hlink:href="sprites.svg#icon1"/>.
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.