Is there any option in SVG to make stroke inside to the element ?
#html-cup {
stroke: #f00;
stroke-opacity: 0.5;
stroke-width: 4px;
fill: #666666;
}
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg viewBox="0 0 245 123" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M66.84,122.57 C50.67,122.59 34.5,122.57 18.34,122.59 C12.72,89.4 7.15,56.2 1.53,23.01 C28.9,23 56.26,22.98 83.63,23.02 C83.63,23.02 72.5,89.4 66.84,122.57 Z M23.1,52.01 C36.09,51.99 49.09,52 62.08,52 C60.94,65.26 59.68,78.51 58.54,91.78 C53.32,93.17 48.19,94.97 42.88,96.02 C37.33,95.22 32.05,93.15 26.62,91.77 C25.52,78.51 24.28,65.26 23.1,52.01 Z M30.14,60.03 C38.44,59.97 46.75,60.01 55.06,60 C54.92,61.66 54.77,63.33 54.62,65 L35.77,65 C35.93,66.58 36.07,68.15 36.22,69.73 C42.22,69.77 48.21,69.75 54.21,69.75 C53.78,74.94 53.27,80.12 52.74,85.3 C49.43,86.12 46.21,87.3 42.84,87.84 C39.26,87.46 35.86,86.1 32.39,85.19 C32.16,82.46 31.95,79.72 31.73,76.99 C33.43,77 35.14,77.01 36.84,77.03 C36.96,78.42 37.07,79.82 37.19,81.21 C40.68,82.52 44.37,82.52 47.91,81.39 C48.13,79.26 48.33,77.13 48.55,75 C42.87,75 37.19,75.01 31.51,74.99 C31.01,70 30.59,65.01 30.14,60.03 Z M52.511235,44.83526 C52.5123089,42.8596197 52.52,41 52.52,41 L54.75,41 L54.75,43.2271118 L54.75,45.965769 C55.3578145,45.972676 57.2375163,45.9831949 57.2375163,45.9831949 C57.2375163,45.9831949 57.9778145,45.985769 58.25,45.985769 C58.23,46.725769 58.2499999,48.1957688 58.2499999,48.1957688 C58.2499999,48.1957688 55.6972973,48.195769 53.7301025,48.195769 L52.52,48.195769 C52.5124025,47.2992642 52.5105772,46.0454936 52.511235,44.83526 Z M45.0349255,41 L47.01,43.6621647 L48.9949341,41 L51.0200005,41 C51.0200005,41 51.016932,47.4818916 51.0200005,48.2245641 C50.4613935,48.2062043 48.9949341,48.2245641 48.9949341,48.2245641 L48.9949341,44.6168721 C48.9949341,44.6168721 47.4588808,46.4909331 47.0100002,47.0509057 C46.5212191,46.4358539 45.0349255,44.6168721 45.0349255,44.6168721 C45.0349255,44.6168721 45.0548757,47.3157561 45.0349255,48.2245641 L43,48.2245641 C43.008857,46.080879 43,41 43,41 L45.0349255,41 Z M39.1482782,41.0148674 C39.6855205,41.0137978 40.3552118,41.0142539 41.220459,41.0178052 C41.2179565,41.8484326 41.2179565,43.28 41.2179565,43.28 C41.2179565,43.28 39.268809,43.2799999 39.1999998,43.2799999 C39.1899998,44.7199999 39.23,46.83 39.2,48.28 C38.65,48.29 39.1999998,48.2800002 37,48.2800002 L37,43.33 C36.7652074,43.3253041 36.4201598,43.3184032 36.0684053,43.3103326 C35.6710848,43.3012166 35,43.28 35,43.28 L35,41 C36.9693426,41.0480327 36.9919583,41.0191607 39.1482782,41.0148674 Z M28.75,40.99 C28.75,41.2714527 28.7480041,41.6786445 28.7457957,42.0983357 C28.7430609,42.6180758 28.74,43.1569852 28.74,43.5 L31.26,43.5 C31.26,43.2967853 31.2589257,43.0248153 31.2574813,42.7291611 C31.254519,42.1227861 31.25,41.4167853 31.25,41 L33.51,41 C33.5,43.4 33.51,45.84 33.51,48.24 C32.96,48.25 31.8499999,48.22 31.2999999,48.24 C31.2699999,47.61 31.3199999,46.3700002 31.2999999,45.7500002 L30.708252,45.7500002 L28.71,45.7500002 C28.69,46.3700002 28.73,47.62 28.71,48.24 C28.16,48.23 27.3096924,48.24 26.49,48.24 C26.49,45.84 26.5,43.4 26.49,41 C27.06,41 28.18,41 28.75,40.99 Z"
id="html-cup"></path>
<path d="M73.905,0.211380899 L76.155,10.7813809 L83.5892007,10.7013808 L85.865,18.5013809 L0.135,18.4613809 L2.73507334,10.7013808 L9.995,10.7013809 C9.995,10.7013809 11.605,3.6413809 12.425,0.121380899 L73.905,0.211380899 L73.905,0.211380899 Z" id="html-top"
fill="#666666"></path>
</g>
</svg>
Alert: Alignment with SVG elements is deprecated.
You can not align stoke. By default stroke is aligned from the middle.
Previously you could do this but this is deprecated
stroke-alignment="inner";
Related
I'm trying to save this svg code as an image and I'm using notpad for that. But when i'm trying it showing issue like "This XML file does not appear to have any style information associated with it. The document tree is shown below." How can I solve it?
<svg height="18px" width="19px" version="1.1" viewBox="0 0 19 18">
<defs></defs>
<g id="Good-One" fill="none" stroke="none" stroke-width="1">
<g id="Footer_06" fill="#9EA0A6" transform="translate(-1141.000000, -3946.000000)">
<g id="Group-7" transform="translate(0.000000, 3204.000000)">
<g id="Group-6" transform="translate(75.000000, 733.000000)">
<g id="dribbble" transform="translate(976.000000, 9.000000)">
<path id="Shape" d="M103.121936,14.778 C102.743936,13.05 102.293936,11.457 101.843936,10.053 C102.293936,9.99 102.743936,9.954 103.265936,9.954 L103.283936,9.954 C104.120936,9.954 105.038936,10.062 106.037936,10.287 C105.695936,12.15 104.615936,13.743 103.121936,14.778 Z M99.1439356,16.02 C97.5779356,16.02 96.1379356,15.507 94.9679356,14.634 C95.2199356,14.229 95.7509356,13.446 96.6059356,12.636 C97.4699356,11.799 98.6939356,10.935 100.250936,10.422 C100.781936,11.925 101.267936,13.635 101.636936,15.561 C100.862936,15.858 100.043936,16.02 99.1439356,16.02 Z M92.1239356,9 C92.1239356,8.964 92.1239356,8.937 92.1239356,8.901 C92.3219356,8.91 92.5829356,8.91 92.8889356,8.91 L92.8979356,8.91 C94.3019356,8.901 96.7679356,8.784 99.2699356,8.001 C99.4049356,8.298 99.5399356,8.604 99.6749356,8.928 C98.0009356,9.486 96.6869356,10.377 95.7149356,11.25 C94.7879356,12.114 94.1489356,12.951 93.7799356,13.5 C92.7539356,12.294 92.1239356,10.719 92.1239356,9 Z M96.0389356,2.7 C96.5339356,3.285 97.5059356,4.554 98.5499356,6.525 C96.4439356,7.164 94.2929356,7.308 93.0059356,7.308 C92.9699356,7.308 92.9339356,7.308 92.8979356,7.308 L92.8889356,7.308 C92.6729356,7.308 92.4839356,7.308 92.3309356,7.299 C92.8439356,5.283 94.1939356,3.6 96.0389356,2.7 Z M99.1439356,1.98 C100.799936,1.98 102.320936,2.556 103.517936,3.519 C102.599936,4.626 101.393936,5.4 100.070936,5.985 C99.1439356,4.203 98.2439356,2.925 97.6499356,2.142 C98.1359356,2.043 98.6309356,1.98 99.1439356,1.98 Z M104.660936,4.662 C105.533936,5.778 106.082936,7.164 106.154936,8.667 C105.137936,8.451 104.183936,8.352 103.283936,8.352 L103.274936,8.352 C102.554936,8.352 101.879936,8.415 101.240936,8.523 C101.087936,8.145 100.943936,7.785 100.772936,7.434 C102.194936,6.813 103.553936,5.922 104.660936,4.662 Z M99.1439356,3.99680289e-16 C94.1733728,-1.59872116e-15 90.1439356,4.02943725 90.1439356,9 C90.1439356,11.3869484 91.0921471,13.6761336 92.7799746,15.363961 C94.467802,17.0517884 96.7569872,18 99.1439356,18 C101.530884,18 103.820069,17.0517884 105.507897,15.363961 C107.195724,13.6761336 108.143936,11.3869484 108.143936,9 C108.143936,6.61305159 107.195724,4.32386638 105.507897,2.63603897 C103.820069,0.948211563 101.530884,1.99840144e-16 99.1439356,3.99680289e-16 Z"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
I have SVG file with one path and 2 lines in d attribute. It have valid fill and look like this
You can view source of this svg file here img1.svg
I change one line of this svg, I make symbol bold. After changes it look like this
it have a wrong fill.
You can view source of this svg file here img2.svg
What is the reason of invalid fill of second file?
In order that the inner circle is not stained, you need to write fill-rule="evenodd"
More details W3C
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1362.71301" height="300">
<g fill="#ffff00" fill-rule="evenodd" stroke="#000000" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
<g><path d="
M77.71,95.66
c-2.96667,0 -5.29,-1.83333 -6.97,-5.5
c-1.64,-3.67333 -2.46,-8.75333 -2.46,-15.24
c0,-3.90667 0.31333,-8.71 0.94,-14.41
c0.78,-7.38667 1.93333,-14.08667 3.46,-20.1
c4.29333,-17.07333 10.52333,-25.61 18.69,-25.61
c2.96667,0 5.27,1.83667 6.91,5.51
c1.68,3.63333 2.52,8.69333 2.52,15.18
c0,3.94667 -0.31333,8.77 -0.94,14.47
c-0.82,7.38667 -1.97,14.08667 -3.45,20.1
c-4.3,17.06667 -10.53333,25.6 -18.7,25.6z
M111.52099,8.30178
c2.06115,1.73429 3.75889,3.86645 5.10023,6.37052
c3.04871,5.64268 4.45878,24.3877 4.45878,24.3877
c0,16.53189 -3.37894,31.27394 -10.19147,44.17397
l-0.00092,0.00173
c-3.89891,7.36538 -8.6741,13.15159 -14.36187,17.27221
c-2.74934,2.00414 -5.66985,3.58411 -8.75938,4.73219
c-4.08503,1.518 -13.03637,2.26991 -13.03637,2.26991
c-7.00914,0 -12.81163,-1.73054 -17.18095,-5.41104
c-2.05687,-1.73261 -3.75131,-3.86164 -5.09027,-6.36127
c-3.04829,-5.64187 -4.45878,-24.3277 -4.45878,-24.3277
c0,-16.571 3.37858,-31.33325 10.19147,-44.23397l0.00309,-0.00584
c3.89784,-7.32217 8.64929,-13.10249 14.28863,-17.26001l0.01363,-0.00996
c2.82017,-2.04262 5.81485,-3.64444 8.98181,-4.79736
c4.04607,-1.47296 8.3447,-2.20287 12.88137,-2.20287
c6.99886,0 12.79443,1.72768 17.16099,5.40178z" id="letter"></path></g>
</g></svg>
SVG multiple shapes containing <g> I want get the particular g tage image width and height using svg editor(https://github.com/SVG-Edit/svgedit) .
Example Image:
<g id="svg_1" class="svg_16 deg_90 cat_top stag" transform="translate(168,27)">
<path id="path3482" stroke="null" d="M163.4569320678711,77.09903907775879 L163.53585815429688,57.430060029029846 L169.3652572631836,57.448439955711365 C172.57144165039062,57.45854997634888 176.23014068603516,57.605380058288574 177.49568939208984,57.77471995353699 C180.63410186767578,58.194659948349 239.44471740722656,73.29018974304199 239.9712677001953,73.8109302520752 C240.62197875976562,74.4544506072998 240.55477905273438,79.61404991149902 239.8870391845703,80.27433967590332 C239.3158416748047,80.83922958374023 181.77594757080078,95.68032836914062 178.26336669921875,96.16965103149414 C177.0821533203125,96.33391952514648 173.2498779296875,96.53572082519531 169.74712371826172,96.61808013916016 L163.3785629272461,96.76786041259766 L163.45748901367188,77.09888076782227 L163.4569091796875,77.09903907775879 L163.4569320678711,77.09903907775879 z" fill="#e8e8e8">
</g>
<g id="svg_2" class="svg_14 deg_180 cat_top stag" stroke-opacity="1">
<path id="path3408" stroke="null" fill="#d5d5d5" d="M333.94000244140625,178.6445770263672 C333.83778381347656,178.53108978271484 333.75416564941406,169.477783203125 333.75416564941406,158.52658081054688 L333.75416564941406,138.61399841308594 L373.75416564941406,138.61399841308594 L413.75416564941406,138.61399841308594 L413.75416564941406,158.73200225830078 L413.75416564941406,178.8499984741211 L373.94017028808594,178.8499984741211 C352.04217529296875,178.8499984741211 334.04217529296875,178.75717163085938 333.94017028808594,178.64366149902344 L333.940002441....50531768798828 L334.86944580078125,143.56642150878906 L373.89344787597656,143.56642150878906 L412.9174499511719,143.56642150878906 L412.9174499511719,141.70929718017578 L412.91815185546875,141.7094268798828 zM340.6531524658203,139.00318908691406 C339.46495056152344,138.9451675415039 337.520751953125,138.9451675415039 336.3325500488281,139.00318908691406 S336.11651611328125,139.10868072509766 338.4928436279297,139.10868072509766 S341.84124755859375,139.06121063232422 340.6531524658203,139.00318908691406 z">
</g>
<svg>
I want svg_1 width height.
var bbox = $("#svg_1").getBBox();
your bbox object looks like this:
SVGRect {x: 119, y: 138, width: 358, height: 308}
probably super easy question, but I have no idea how to use svgs. We have got the code:
<svg height="16px" version="1.1" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><defs/><g fill="none" fill-rule="evenodd" id="Icons with numbers" stroke="none" stroke-width="1"><g fill="#000000" id="Group" transform="translate(-48.000000, -432.000000)"><path d="M54.8796844,443.0591 L54.8796844,445 L57.2307692,445 L57.2307692,443.0591 Z M56,448 C51.5817218,448 48,444.418278 48,440 C48,435.581722 51.5817218,432 56,432 C60.4182782,432 64,435.581722 64,440 C64,444.418278 60.4182782,448 56,448 Z M53.5700197,435.51041 C52.5864514,436.043208 52.0631167,436.947609 52,438.22364 L54.2800789,438.22364 C54.2800789,437.852024 54.4076253,437.493845 54.6627219,437.149093 C54.9178185,436.804341 55.3504243,436.631968 55.9605523,436.631968 C56.5811997,436.631968 57.0085458,436.771881 57.2426036,437.051713 C57.4766613,437.331544 57.5936884,437.641592 57.5936884,437.981867 C57.5936884,438.277369 57.4884955,438.548241 57.2781065,438.794493 L56.8205128,439.190732 L56.2445759,439.573539 C55.6765258,439.949633 55.3241295,440.282067 55.1873767,440.570853 C55.0506239,440.859639 54.9664696,441.382356 54.9349112,442.139019 L57.0650888,442.139019 C57.0703485,441.780835 57.1045362,441.516679 57.1676529,441.346541 C57.2675876,441.077903 57.4700839,440.842849 57.7751479,440.64137 L58.3353057,440.271995 C58.9033559,439.895901 59.28731,439.586972 59.4871795,439.345198 C59.8290615,438.946718 60,438.456461 60,437.874412 C60,436.925225 59.6068415,436.208867 58.8205128,435.725319 C58.0341841,435.241771 57.0466858,435 55.8579882,435 C54.9533157,435 54.1906671,435.170135 53.5700197,435.51041 Z M53.5700197,435.51041" id="Oval 318"/></g></g></svg>
which gives us a question mark. But how can I fill with color the actual question mark, not only the black circle ?
The <path> element provides you with a black circle containing a cut-out question mark. To fill the question mark, just put it on top of a circle with the required fill colour.
I've fixed your coordinates a bit in the following example:
<svg viewBox="0 0 16 16">
<circle r="7" fill="#ff0" transform="translate(8,8)" />
<path d="M6.88,11.059 L6.88,13 L9.231,13 L9.231,11.059 Z M8,16 C3.582,16 0,12.418
0,8 C0,3.582 3.582,0 8,0 C12.418,0 16,3.582 16,8 C16,12.418 12.418,16 8,16
Z M5.57,3.51 C4.586,4.043 4.063,4.948 4,6.224 L6.28,6.224 C6.28,5.852
6.408,5.494 6.663,5.149 C6.918,4.804 7.35,4.632 7.961,4.632 C8.581,4.632
9.009,4.772 9.243,5.052 C9.477,5.332 9.594,5.642 9.594,5.982 C9.594,6.277
9.488,6.548 9.278,6.794 L8.821,7.191 L8.245,7.574 C7.677,7.95 7.324,8.282
7.187,8.571 C7.051,8.86 6.966,9.382 6.935,10.139 L9.065,10.139 C9.07,9.781
9.105,9.517 9.168,9.347 C9.268,9.078 9.47,8.843 9.775,8.641 L10.335,8.272
C10.903,7.896 11.287,7.587 11.487,7.345 C11.829,6.947 12,6.456 12,5.874
C12,4.925 11.607,4.209 10.821,3.725 C10.034,3.242 9.047,3 7.858,3 C6.953,3
6.191,3.17 5.57,3.51 Z M5.57,3.513" fill="#000" fill-rule="evenodd" />
</svg>
Just wondering how I would put text inside of the following code in SVG?
<?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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="8000" height="3859" viewBox="0 0 8000 3859">
<g id="Australian Capital Territory">
<path d='M7309.2520970 2655.9737271L7309.1225992 2655.9244070L7308.8019058 2655.7330585L7308.7090199 2655.6527227L7308.5551142 2655.4676452L7305.7285369 2652.0430337L7305.6607371 2651.9503255L7305.1115580 2650.6791888L7305.1481699 2647.5938860L7305.1732559 2647.1433952L7305.8458307 2643.8975903L7305.8824427 2643.7803067L7305.9441406 2643.6630232L7306.0675364 2643.4842166L7306.2221201 2643.3052406L7306.5923075 2643.0027101L7307.3204783 2642.5462873L7312.0535883 2639.7816499L7314.5533701 2640.5899233L7314.5411661 2640.7443240L7314.5533701 2640.8924538L7314.5838801 2641.0032969L7314.7445658 2641.1700701L7315.8117360 2642.1264732L7317.0646779 2642.6388260L7317.2131596 2642.6757737L7317.3799474 2642.6942476L7317.5460571 2642.6820447L7317.8545466 2642.7374662L7319.1447784 2643.3237144L7319.2559702 2643.3854069L7319.3237701 2643.4964195L7319.1698644 2643.6569217L7318.8613749 2643.8913193L7318.4410156 2644.1321573L7318.3237218 2644.1875789L7318.1752400 2644.2307975L7318.0091303 2644.2246961L7317.4226613 2644.0702954L7316.4476989 2643.9345380L7316.2626052 2643.9284365L7315.9792017 2643.9963999L7314.7133778 2644.4528227L7314.6028640 2644.5084138L7314.4109903 2644.6565436L7314.2509826 2644.8355196L7313.5045059 2645.7426027L7313.3621261 2645.9214092L7312.1891881 2649.7412595L7312.1647801 2649.8770169L7312.1586781 2650.0127743L7312.1830861 2650.2966615L7312.3064819 2650.7841000L7312.5966654 2652.4440349L7312.6583633 2654.5729345L7312.5410695 2655.1159641L7312.4549636 2655.3505312L7311.4616953 2656.5289595L7311.3688095 2656.6031939L7311.2332097 2656.6464126z' fill='blue' stroke='black' />
</g>
So with this example I would like to write Australian Capital Territory in it. And I would like to be able to add other states with there names in there shapes as well.
Any help I would be grateful for.
Hodds.
Use the <text> element (view on JS Bin):
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="7300 2639.25 30 17.90625">
<g id="AustralianCapitalTerritory">
<path d='M7309.2520970 2655.9737271L7309.1225992 2655.9244070L7308.8019058 2655.7330585L7308.7090199 2655.6527227L7308.5551142 2655.4676452L7305.7285369 2652.0430337L7305.6607371 2651.9503255L7305.1115580 2650.6791888L7305.1481699 2647.5938860L7305.1732559 2647.1433952L7305.8458307 2643.8975903L7305.8824427 2643.7803067L7305.9441406 2643.6630232L7306.0675364 2643.4842166L7306.2221201 2643.3052406L7306.5923075 2643.0027101L7307.3204783 2642.5462873L7312.0535883 2639.7816499L7314.5533701 2640.5899233L7314.5411661 2640.7443240L7314.5533701 2640.8924538L7314.5838801 2641.0032969L7314.7445658 2641.1700701L7315.8117360 2642.1264732L7317.0646779 2642.6388260L7317.2131596 2642.6757737L7317.3799474 2642.6942476L7317.5460571 2642.6820447L7317.8545466 2642.7374662L7319.1447784 2643.3237144L7319.2559702 2643.3854069L7319.3237701 2643.4964195L7319.1698644 2643.6569217L7318.8613749 2643.8913193L7318.4410156 2644.1321573L7318.3237218 2644.1875789L7318.1752400 2644.2307975L7318.0091303 2644.2246961L7317.4226613 2644.0702954L7316.4476989 2643.9345380L7316.2626052 2643.9284365L7315.9792017 2643.9963999L7314.7133778 2644.4528227L7314.6028640 2644.5084138L7314.4109903 2644.6565436L7314.2509826 2644.8355196L7313.5045059 2645.7426027L7313.3621261 2645.9214092L7312.1891881 2649.7412595L7312.1647801 2649.8770169L7312.1586781 2650.0127743L7312.1830861 2650.2966615L7312.3064819 2650.7841000L7312.5966654 2652.4440349L7312.6583633 2654.5729345L7312.5410695 2655.1159641L7312.4549636 2655.3505312L7311.4616953 2656.5289595L7311.3688095 2656.6031939L7311.2332097 2656.6464126z' fill='blue' stroke='black'/>
<text x="7300" y="2648" font-size="2" fill="white" stroke="black" stroke-width=".06">Australian Capital Territory</text>
</g>
</svg>
I adjusted two unrelated things in your SVG:
Adjusted the viewBox so that one could actually see the image. width and height can be set to anything you like for scaling the image.
Australian Capital Territory is an invalid ID, changed that to AustralianCapitalTerritory