Related
There is a svg file ,i can show it with chrome.
svg file
Why can see nothing when to import it(please download it form dropbox and save it as gen.svg) with inkscape?
This svg includes a PNG-File instead of SVG path or fill instructions, where Inkscape is made for:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!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="880px" height="919px" viewBox="0 0 880 919" enable-background="new 0 0 880 919" xml:space="preserve"> <image id="image0" width="880" height="919" x="0" y="0"
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA3AAAAOXCAIAAADqyTS6AAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAACA
AElEQVR42uz995sj2XXnCX/PDQeXyMzypqurq71h03uRlEhKlKVGErWa0c7MzuzO+0ftM7O7MyPD
...
ODowMKFcwFEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDQtMTFUMTY6MTc6MjQrMDg6MDDQAXjt
AAAAAElFTkSuQmCC" />
</svg>
The problem is that the image isn't linked correctly. Use
xlink:href
instead of
href
With svg can someone tell me if I need to use both viewBox and the enable-background with the numbers repeated like here:
<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;" xml:space="preserve">
This is the full svg being used:
<?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;" 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>
<g>
</g>
<g>
</g>
</svg>
You do not need both of them to work, however i would recommend you to use viewBox
because the enable-background is beeing removed from new web browsers according to this.
Also i would recommend to optimize SVG files created in illustrator as they generate some unuseful code but that of course is up to you :)
i have converted a map from vector to SVG in illustrator i am able give mouseover effect, link etc but i am not able give the tooltip effect even i tried many sample from stackoverflow, as the example are different what i see in my code also if impliement no effect i can find kindly help in this how to do
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, 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"
width="200px" height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#F79226;}
]]>
</style>
<path class="st0" d="M39.218,124.52c0.857,0,1.715,0.02,2.572-0.01c0.39-0.012,0.807-0.049,1.159-0.199
c0.55-0.236,1.104-0.604,1.047-1.287c-0.046-0.563-0.667-0.563-1.076-0.713c-1.176-0.432-2.354-0.869-3.555-1.223
c-2.095-0.615-3.657-2.063-5.355-3.305c-0.767-0.563-0.769-1.154-0.148-1.816c0.181-0.191,0.326-0.424,0.529-0.586
c2.208-1.773,2.807-4.191,2.8-6.865c-0.002-0.857,0.051-1.715,0.067-2.572c0.011-0.598,0.05-1.238-0.389-1.695
c-0.821-0.852-0.839-1.885-0.829-2.955c0.02-1.976-0.047-3.892-0.788-5.824c-0.569-1.485,0.075-3.097,0.843-4.519
c0.061-0.111,0.218-0.177,0.263-0.291c0.853-2.139,2.386-3.614,4.247-4.951c1.068-0.768,1.708-2.154,2.483-3.301
c0.653-0.966,1.542-1.634,2.536-2.159c2.089-1.104,5.048-0.211,5.847,1.952c0.502,1.359,0.333,2.912-0.74,4.073
c-1.137,1.231-1.548,2.729-1.906,4.279c-0.203,0.878-0.058,1.592,0.869,1.93c0.98,0.359,1.355,1.137,1.654,2.061
c0.671,2.078,1.477,4.071,3.408,5.392c0.702,0.479,0.53,1.911-0.312,2.833c-1.112,1.219-2.309,2.357-3.458,3.541
c-0.413,0.424-0.811,0.867-1.182,1.328c-0.216,0.268-0.291,0.629-0.09,0.922c0.249,0.363,0.61,0.176,0.881,0.014
c1.078-0.641,2.119-1.344,3.21-1.959c2.455-1.383,4.888-1.229,7.18,0.35c0.708,0.488,1.278,0.537,1.994,0.17
c1.996-1.023,4.003-2.027,6.005-3.039c0.542-0.275,0.968-0.627,1.194-1.242c0.662-1.797,0.267-2.409-1.638-2.458
c-0.837-0.023-1.75,0.209-2.368-0.633c-0.676-0.92-1.119-1.965-1.302-3.069c-0.126-0.763,1.584-2.128,2.539-2.12
c0.39,0.003,0.777,0.146,1.17,0.183c0.436,0.041,1.011,0.269,1.181-0.347c0.171-0.613-0.04-1.214-0.671-1.481
c-0.478-0.201-1.009-0.296-1.526-0.384c-0.91-0.154-1.823-0.317-2.742-0.382c-0.961-0.068-1.547-0.57-2.049-1.339
c-1.112-1.7-0.615-2.838,1.455-3.063c1.045-0.113,2.114-0.005,3.163-0.1c0.932-0.085,1.376-0.909,1.02-1.692
c-0.275-0.604-0.838-0.574-1.354-0.603c-2.568-0.142-5.137-0.371-7.706-0.36c-1.675,0.007-2.895-0.513-3.901-1.843
c-1.113-1.472-2.37-2.834-3.533-4.27c-1.676-2.067-1.531-4.837,0.333-6.776c1.326-1.38,2.676-2.736,3.987-4.131
c0.537-0.572,1.097-1.146,1.269-1.971c0.139-0.666,0.305-1.317-0.491-1.709c-0.116-0.057-0.232-0.141-0.311-0.24
c-0.824-1.046-0.652-6.054,0.314-6.969c1.34-1.27,2.72-2.505,4.158-3.661c1.184-0.952,2.071-0.652,2.49,0.815
c0.489,1.714,0.952,3.43,1.628,5.085c0.334,0.816,0.75,1.521,1.48,2.045c2.798,2.01,5.151,4.524,7.693,6.825
c0.584,0.528,1.091,1.174,1.906,1.365c0.669,0.157,1.436,0.809,2.009,0.098c0.576-0.713,0.827-1.655,0.511-2.606
c-0.123-0.37-0.359-0.703-0.555-1.047c-1.21-2.12-2.446-4.226-3.628-6.361c-1.037-1.872-0.726-2.778,1.354-3.382
c1.661-0.481,3.344-0.612,4.8,0.803c1.066,1.036,1.145,0.96,2.297,0.015c0.408-0.335,0.822-0.666,1.201-1.032
c0.729-0.706,0.674-0.994-0.356-1.31c-1.387-0.425-2.801-0.76-4.204-1.131c-0.778-0.207-1.451-0.544-2.019-1.164
c-0.979-1.068-1.218-2.073-0.707-3.561c0.644-1.874,1.655-2.933,3.558-3.51c3.471-1.053,6.866-2.35,10.303-3.516
c1.086-0.369,1.99-0.959,2.834-1.738c6.692-6.173,13.414-12.315,20.118-18.476c0.689-0.634,1.459-1.121,2.304-1.514
c3.649-1.698,7.3-3.391,10.938-5.113c2.025-0.958,4.162-0.677,6.226-0.433c1.257,0.148,2.017,1.399,2.714,2.444
c0.289,0.432,0.516,0.938,0.641,1.442c0.461,1.852,1.89,2.572,3.49,3.158c0.648,0.238,1.175,0.203,1.579-0.356
c1.057-1.464,2.777-2.515,2.827-4.615c0.016-0.707,0.523-1.024,1.205-1.046c0.528-0.016,1.058,0.006,1.583-0.031
c1.084-0.077,1.712,0.424,2.077,1.431c0.655,1.81,1.72,3.413,2.684,5.065c0.404,0.692,0.822,1.359,1.727,1.487
c0.554,0.079,0.932,0.471,1.301,0.851c1.196,1.23,2.385,2.468,3.585,3.694c0.479,0.49,0.768,1.034,0.811,1.743
c0.112,1.817-0.48,2.275-2.235,1.667c-1.958-0.679-2.147-0.611-2.598,0.932c-0.337,1.156,0.608,2.655,1.921,2.953
c0.508,0.115,1.053,0.052,1.575,0.113c0.318,0.038,0.666,0.096,0.926,0.263c0.188,0.12,0.398,0.48,0.344,0.655
c-0.405,1.311,1.471,1.913,0.878,3.395c-1.313,3.279-3.335,5.534-6.955,6.298c-3.372,0.712-6.721,1.364-10.186,1.143
c-0.327-0.021-0.659,0.012-0.988,0.029c-0.822,0.045-1.16,0.516-1.138,1.303c0.02,0.711,0.38,1.104,1.093,1.135
c0.659,0.028,1.318,0.027,1.979,0.039c2.101,0.037,4.058,1.404,4.471,3.439c0.541,2.658,1.177,5.274,2.1,7.824
c0.132,0.364,0.17,0.777,0.178,1.168c0.052,2.524,0.13,3.059-2.573,2.917c-0.6-0.031-1.233,0.021-1.654,0.503
c-1.092,1.248-2.576,1.781-4.044,2.386c-1.32,0.543-1.345,0.689-0.753,1.882c1.758,3.537,1.347,4.399-2.385,5.758
c-2.168,0.788-4.131,0.925-6.21-0.336c-1.521-0.924-3.095-1.781-4.509-2.854c-1.397-1.061-2.86-1.455-4.599-1.346
c-2.255,0.142-4.472,0.244-6.446,1.548c-1.741,1.15-2.416,2.914-2.77,4.805c-0.205,1.09,0.666,2.045,2.036,2.241
c1.899,0.272,3.86,0.487,5.194-1.427c1.53-2.197,3.789-1.793,5.936-1.573c1.025,0.105,1.67,1.049,2.35,1.732
c1.061,1.07,2.241,1.479,3.727,1.406c1.777-0.088,3.563-0.009,5.345-0.013c0.876-0.001,1.176,0.28,1.225,1.286
c0.108,2.259,0.788,4.436,2.218,6.225c3.09,3.866,6.383,7.557,10.185,10.76c0.56,0.472,1.126,0.858,1.866,1.051
c1.449,0.376,1.854,1.837,0.833,3.001c-0.562,0.643-1.271,1.148-1.886,1.748c-1.748,1.701-2.137,4.977-0.854,7.039
c0.279,0.447,0.581,0.885,0.832,1.348c1.422,2.607,1.316,3.205-0.738,5.301c-2.883,2.941-2.543,1.848-1.715,5.988
c0.337,1.684,0.812,3.33,1.37,4.955c0.638,1.855-0.089,3.924-1.707,5.01c-0.491,0.33-1.023,0.602-1.542,0.891
c-2.429,1.357-2.877,3.682-1.104,5.844c1.632,1.99,3.31,3.943,4.917,5.951c1.623,2.029,1.654,3.154,0.258,5.354
c-1.609,2.531-1.144,2.695-4.511,1.57c-3.567-1.191-7.165-2.289-10.746-3.439c-1.269-0.408-2.558-0.592-3.893-0.592
c-3.167,0.002-6.336-0.023-9.503-0.09c-1.229-0.025-2.329,0.254-3.396,0.859c-2.121,1.207-4.285,2.34-6.413,3.535
c-0.946,0.533-1.921,0.803-3.015,0.797c-4.619-0.025-9.238-0.025-13.858-0.002c-1.091,0.008-2.063-0.293-3.035-0.754
c-3.28-1.553-6.595-3.033-9.86-4.615c-1.121-0.543-2.084-0.533-3.178,0.049c-4.627,2.461-3.589,1.055-4.89,6.131
c-0.114,0.445-0.189,0.904-0.251,1.361c-0.256,1.877-1.373,3.047-3.21,3.385c-0.932,0.17-1.531-0.189-1.853-1.059
c-0.528-1.424-1.075-2.838-1.576-4.271c-0.518-1.482-1.35-1.799-2.622-0.855c-0.951,0.707-1.819,1.525-2.722,2.297
c-0.46,0.395-0.953,0.672-1.584,0.727c-1.455,0.129-1.831-0.094-2.317-1.512c-0.128-0.375-0.261-0.75-0.353-1.135
c-0.259-1.086-0.938-1.662-2.034-1.877c-1.358-0.27-2.694-0.65-4.046-0.949c-0.81-0.18-1.33-0.596-1.321-1.463
c0.01-1.039-0.607-1.697-1.299-2.336c-1.745-1.611-3.451-3.266-5.233-4.834c-1.017-0.895-1.279-1.949-1.498-3.262
c-0.513-3.078,1.339-4.434,3.551-5.682c0.611-0.344,1.276-0.314,1.931-0.273c1.645,0.104,3.291,0.211,4.932,0.365
c2.081,0.197,3.633-1.023,5.273-1.959c0.633-0.363,0.778-2.156,0.353-2.744c-0.354-0.488-0.814-0.34-1.239-0.135
c-0.691,0.336-1.033,1.014-1.412,1.621c-0.549,0.879-1.294,1.25-2.316,1.203c-0.856-0.041-1.716-0.027-2.573,0
c-1.104,0.035-2.011-0.102-2.669-1.236c-0.55-0.949-2.331-1.029-3.811-0.326c-1.25,0.594-2.493,1.227-3.662,1.965
c-1.716,1.084-3.562,0.754-5.389,0.652c-0.772-0.043-1.11-0.684-1.278-1.342c-0.424-1.658-1.242-2.76-3.093-3.125
c-1.35-0.264-1.508-1.408-0.461-2.336c0.951-0.844,1.982-1.52,3.378-1.346c0.714,0.09,1.449,0.016,2.175,0.016
C39.218,124.559,39.218,124.539,39.218,124.52z"/>
</svg>
I've got SVG file with icon, it's size is 512 x 512, I need to change it to 1024 x 1024. It has the following content:
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 512 512" height="512px" id="Layer_1" version="1.1" viewBox="0 0 512 512" width="512px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><g><path d="M400.219,208c10.219,31.75-4.031,96.969-43,112.328C415.406,195.969,290,16,176.008,16 c47.805,26.516,99.289,122.734,29.375,206.953C212.281,212.359,213.828,142,176.07,112C201.063,205.828,96,226.766,96,330.859 C96,413.234,170.672,480,262.766,480C383.094,480,486.313,332.672,400.219,208z" fill="#FC2929"/></g></svg>
<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg enable-background="new 0 0 1024 1024" height="1024px" id="Layer_1" version="1.1" viewBox="0 0 1024 1024" width="1024px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px">
<g transform="scale(2)">
<path d="M400.219,208c10.219,31.75-4.031,96.969-43,112.328C415.406,195.969,290,16,176.008,16 c47.805,26.516,99.289,122.734,29.375,206.953C212.281,212.359,213.828,142,176.07,112C201.063,205.828,96,226.766,96,330.859 C96,413.234,170.672,480,262.766,480C383.094,480,486.313,332.672,400.219,208z" fill="#FC2929"/>
</g>
</svg>
Using transform attribute on the group with the scale property and changing 512 to 1024.
How can I combine SVG icons from http://raphaeljs.com/icons/ to make a CSS Sprite.
When I do this:
<?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="30em" height="160em" viewBox="0 0 30 160" enable-background="new 0 0 30 160" xml:space="preserve">
<g id="icons">
<g id="linkedin">
<path d="M27.25,3.125h-22c-1.104,0-2,0.896-2,2v22c0,1.104,0.896,2,2,2h22c1.104,0,2-0.896,2-2v-22C29.25,4.021,28.354,3.125,27.25,3.125zM11.219,26.781h-4v-14h4V26.781zM9.219,11.281c-1.383,0-2.5-1.119-2.5-2.5s1.117-2.5,2.5-2.5s2.5,1.119,2.5,2.5S10.602,11.281,9.219,11.281zM25.219,26.781h-4v-8.5c0-0.4-0.403-1.055-0.687-1.213c-0.375-0.211-1.261-0.229-1.665-0.034l-1.648,0.793v8.954h-4v-14h4v0.614c1.583-0.723,3.78-0.652,5.27,0.184c1.582,0.886,2.73,2.864,2.73,4.702V26.781z"
/>
</g>
<g id="github">
<path d="M 500 800 M28.436,15.099c-1.201-0.202-2.451-0.335-3.466-0.371l-0.179-0.006c0.041-0.09,0.072-0.151,0.082-0.16c0.022-0.018,0.04-0.094,0.042-0.168c0-0.041,0.018-0.174,0.046-0.35c0.275,0.01,0.64,0.018,1.038,0.021c1.537,0.012,3.145,0.136,4.248,0.331c0.657,0.116,0.874,0.112,0.389-0.006c-0.491-0.119-1.947-0.294-3.107-0.37c-0.779-0.053-1.896-0.073-2.554-0.062c0.019-0.114,0.041-0.241,0.064-0.371c0.093-0.503,0.124-1.009,0.126-2.016c0.002-1.562-0.082-1.992-0.591-3.025c-0.207-0.422-0.441-0.78-0.724-1.104c0.247-0.729,0.241-1.858-0.015-2.848c-0.211-0.812-0.285-0.864-1.021-0.708C22.19,4.019,21.69,4.2,21.049,4.523c-0.303,0.153-0.721,0.391-1.024,0.578c-0.79-0.278-1.607-0.462-2.479-0.561c-0.884-0.1-3.051-0.044-3.82,0.098c-0.752,0.139-1.429,0.309-2.042,0.511c-0.306-0.189-0.75-0.444-1.067-0.604C9.973,4.221,9.473,4.041,8.847,3.908c-0.734-0.157-0.81-0.104-1.02,0.708c-0.26,1.003-0.262,2.151-0.005,2.878C7.852,7.577,7.87,7.636,7.877,7.682c-1.042,1.312-1.382,2.78-1.156,4.829c0.059,0.534,0.15,1.024,0.277,1.473c-0.665-0.004-1.611,0.02-2.294,0.064c-1.162,0.077-2.618,0.25-3.109,0.369c-0.484,0.118-0.269,0.122,0.389,0.007c1.103-0.194,2.712-0.32,4.248-0.331c0.29-0.001,0.561-0.007,0.794-0.013c0.07,0.237,0.15,0.463,0.241,0.678L7.26,14.759c-1.015,0.035-2.264,0.168-3.465,0.37c-0.901,0.151-2.231,0.453-2.386,0.54c-0.163,0.091-0.03,0.071,0.668-0.106c1.273-0.322,2.928-0.569,4.978-0.741l0.229-0.02c0.44,1.022,1.118,1.802,2.076,2.41c0.586,0.373,1.525,0.756,1.998,0.816c0.13,0.016,0.508,0.094,0.84,0.172c0.333,0.078,0.984,0.195,1.446,0.262h0.011c-0.009,0.006-0.017,0.01-0.025,0.016c-0.56,0.291-0.924,0.744-1.169,1.457c-0.11,0.033-0.247,0.078-0.395,0.129c-0.529,0.18-0.735,0.217-1.271,0.221c-0.556,0.004-0.688-0.02-1.02-0.176c-0.483-0.225-0.933-0.639-1.233-1.133c-0.501-0.826-1.367-1.41-2.089-1.41c-0.617,0-0.734,0.25-0.288,0.615c0.672,0.549,1.174,1.109,1.38,1.537c0.116,0.24,0.294,0.611,0.397,0.824c0.109,0.227,0.342,0.535,0.564,0.748c0.522,0.498,1.026,0.736,1.778,0.848c0.504,0.074,0.628,0.074,1.223-0.002c0.287-0.035,0.529-0.076,0.746-0.127c0,0.244,0,0.525,0,0.855c0,1.766-0.021,2.334-0.091,2.5c-0.132,0.316-0.428,0.641-0.716,0.787c-0.287,0.146-0.376,0.307-0.255,0.455c0.067,0.08,0.196,0.094,0.629,0.066c0.822-0.051,1.403-0.355,1.699-0.891c0.095-0.172,0.117-0.518,0.147-2.318c0.032-1.953,0.046-2.141,0.173-2.42c0.077-0.166,0.188-0.346,0.25-0.395c0.104-0.086,0.111,0.084,0.111,2.42c-0.001,2.578-0.027,2.889-0.285,3.385c-0.058,0.113-0.168,0.26-0.245,0.33c-0.135,0.123-0.192,0.438-0.098,0.533c0.155,0.154,0.932-0.088,1.356-0.422c0.722-0.572,0.808-1.045,0.814-4.461l0.003-2.004l0.219,0.021l0.219,0.02l0.036,2.621c0.041,2.951,0.047,2.994,0.549,3.564c0.285,0.322,0.572,0.5,1.039,0.639c0.625,0.188,0.813-0.102,0.393-0.605c-0.457-0.547-0.479-0.756-0.454-3.994c0.017-2.076,0.017-2.076,0.151-1.955c0.282,0.256,0.336,0.676,0.336,2.623c0,2.418,0.069,2.648,0.923,3.07c0.399,0.195,0.511,0.219,1.022,0.221c0.544,0.002,0.577-0.006,0.597-0.148c0.017-0.115-0.05-0.193-0.304-0.348c-0.333-0.205-0.564-0.467-0.709-0.797c-0.055-0.127-0.092-0.959-0.117-2.672c-0.036-2.393-0.044-2.502-0.193-2.877c-0.201-0.504-0.508-0.902-0.897-1.166c-0.101-0.066-0.202-0.121-0.333-0.162c0.161-0.016,0.317-0.033,0.468-0.055c1.572-0.209,2.403-0.383,3.07-0.641c1.411-0.543,2.365-1.445,2.882-2.724c0.046-0.114,0.092-0.222,0.131-0.309l0.398,0.033c2.051,0.173,3.706,0.42,4.979,0.743c0.698,0.177,0.831,0.198,0.668,0.105C30.666,15.551,29.336,15.25,28.436,15.099zM22.422,15.068c-0.233,0.512-0.883,1.17-1.408,1.428c-0.518,0.256-1.33,0.451-2.25,0.544c-0.629,0.064-4.137,0.083-4.716,0.026c-1.917-0.188-2.991-0.557-3.783-1.296c-0.75-0.702-1.1-1.655-1.039-2.828c0.039-0.734,0.216-1.195,0.679-1.755c0.421-0.51,0.864-0.825,1.386-0.985c0.437-0.134,1.778-0.146,3.581-0.03c0.797,0.051,1.456,0.051,2.252,0c1.886-0.119,3.145-0.106,3.61,0.038c0.731,0.226,1.397,0.834,1.797,1.644c0.18,0.362,0.215,0.516,0.241,1.075C22.808,13.699,22.675,14.517,22.422,15.068zM12.912,11.762c-1.073-0.188-1.686,1.649-0.863,2.587c0.391,0.445,0.738,0.518,1.172,0.248c0.402-0.251,0.62-0.72,0.62-1.328C13.841,12.458,13.472,11.862,12.912,11.762zM19.425,11.872c-1.073-0.188-1.687,1.647-0.864,2.586c0.392,0.445,0.738,0.519,1.173,0.247c0.401-0.25,0.62-0.72,0.62-1.328C20.354,12.569,19.985,11.971,19.425,11.872zM16.539,15.484c-0.023,0.074-0.135,0.184-0.248,0.243c-0.286,0.147-0.492,0.096-0.794-0.179c-0.187-0.169-0.272-0.258-0.329-0.081c-0.053,0.164,0.28,0.493,0.537,0.594c0.236,0.094,0.405,0.097,0.661-0.01c0.254-0.106,0.476-0.391,0.476-0.576C16.842,15.303,16.595,15.311,16.539,15.484zM16.222,14.909c0.163-0.144,0.2-0.44,0.044-0.597s-0.473-0.133-0.597,0.043c-0.144,0.206-0.067,0.363,0.036,0.53C15.865,15.009,16.08,15.034,16.222,14.909z"
/>
</g>
</g>
</svg>
the SVG icons overlap. How can I modify these to have an offset between two icons?
For instance, the one similar to http://dbushell.com/demos/css-sprites/sprite.svg
Try to replace the 2nd M command to m command.
"M" means absolute position, "m" means relative position.
so,
<M 500 800 ｍ28.436,15.099c-1.201-0.202-2.…