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>
Related
I'm referencing an svg file's content from my html, like this:
<svg id='container' width="19" height="19">
<use href="../svg.svg#path"/>
</svg>
svg.svg
<svg
id="home"
width="19"
height="19"
viewBox="0 0 19 19"
xmlns="http://www.w3.org/2000/svg">
<path id='path' fill-rule="evenodd" clip-rule="evenodd" d="M6.10156 2.31433C4.85892 2.31433
3.85156 3.32169 3.85156 4.56433V7.27979L5.21733 6.15722C5.88058 5.61207 6.84134 5.62857 7.48549
6.19616L11.5046 9.7376C11.8811 10.0694 12.0971 10.547 12.0976 11.0489L12.1032 16.8638H14.6256C15.8682
16.8638 16.8756 15.8565 16.8756 14.6138V4.56433C16.8756 3.32169 15.8682 2.31433 14.6256 2.31433H6.10156ZM2.35156
4.56433V8.51269L0.879033 9.72301C0.474603 10.0554 0.240234 10.5514 0.240234 11.0749L0.240249
16.6071C0.240252 17.5731 1.02297 18.3564 1.98897 18.3571L12.1047 18.3645L12.1047 18.3638H14.6256C16.6966
18.3638 18.3756 16.6849 18.3756 14.6138V4.56433C18.3756 2.49326 16.6966 0.814331 14.6256 0.814331H6.10156C4.03049
0.814331 2.35156 2.49326 2.35156 4.56433ZM6.49381 7.32159C6.40179 7.2405 6.26454 7.23814 6.16979 7.31602L1.83149 10.8818C1.77372 10.9293 1.74023 11.0002 1.74023 11.0749L1.74025 16.6071C1.74025 16.7451 1.85207 16.857 1.99007 16.8571L5.42188 16.8596V14.1996C5.42188 13.7854 5.75766 13.4496 6.17188 13.4496C6.58609 13.4496 6.92188 13.7854 6.92188 14.1996V16.8607L10.6032 16.8634L10.5976 11.0503C10.5975 10.9786 10.5667 10.9104 10.5129 10.863L6.49381 7.32159Z" />
</svg>
Question is:
Why do I need to set width and height in container? If I fail to do so, container takes up 150px by 300px.
How could I just make container automatically shrink to fit home's dimensions?
Thanks
The HTML spec says that if the size of any "replaced element" (that's things like <svg>, <canvas>, <object> etc) is not specified, then its size should default to 300px x 150px.
The <use> points to a <path>, rather than a whole SVG image, so it's size is indeterminate.
Given your use case, you cannot.
I have a series of opaque svg paths that overlap eachother. I want to create a mask based on each shape's previous sibling to mask the overlap.
My problem is that in a case where I have to shapes (fiddle below) the mask based on shape 0 completely removes shape 1
I'm a bit new at SVG, but it was my understanding that the mask "punches a hole" in its coordinates when applied. I expected the mask to remove anything in shape 1 that shares coordinates with shape 0, not completely hiding it. What am I doing wrong?
https://jsfiddle.net/nazhgvL6/3/
<svg pointer-events="none" width="1558" height="1163" viewBox="-130 -97 1558 1163" style="transform: translate3d(-330px, -497px, 0px) scale(1);">
<defs>
<!-- #mask-shape-1 d attribute is the same as the d attribute of the shape 0 path-->
<mask id="mask-shape-1"> <!-- rename ID to turn mask on/off -->
<path d="M779 780L779 767L775 741L771 728L760 704L746 682L737 672L717 655L682 636L656 629L630 627L604 636L582 648L563 664L555 673L543 692L529 709L515 737L510 758L508 779L516 799L526 817L539 831L562 847L571 862L592 881L601 887L619 895L630 898L650 897L670 891L689 883L707 871L714 864L733 852L742 844L757 826L764 816L775 792z" fill="white"></path>
<path d="M779 780L779 767L775 741L771 728L760 704L746 682L737 672L717 655L682 636L656 629L630 627L604 636L582 648L563 664L555 673L543 692L529 709L515 737L510 758L508 779L516 799L526 817L539 831L562 847L571 862L592 881L601 887L619 895L630 898L650 897L670 891L689 883L707 871L714 864L733 852L742 844L757 826L764 816L775 792z" rx="5" fill="black"></path>"
</mask>
</defs>
<g>
<!-- shape 0 -->
<path class="arrival-lines-polygon-fill leaflet-interactive" stroke="none" fill="red" fill-opacity="0.2" d="M779 780L779 767L775 741L771 728L760 704L746 682L737 672L717 655L682 636L656 629L630 627L604 636L582 648L563 664L555 673L543 692L529 709L515 737L510 758L508 779L516 799L526 817L539 831L562 847L571 862L592 881L601 887L619 895L630 898L650 897L670 891L689 883L707 871L714 864L733 852L742 844L757 826L764 816L775 792z" mask="url(#mask-shape-0)"></path>
<!-- shape 1 -->
<path class="arrival-lines-polygon-fill leaflet-interactive" stroke="none" fill="red" fill-opacity="0.2" d="M562 849L522 810L495 770L485 749L482 738L483 715L489 693L498 671L504 661L541 613L573 588L599 576L614 572L643 575L657 578L684 588L697 595L709 603L731 622L749 644L756 656L768 683L772 696L777 731L779 760z" mask="url(#mask-shape-1)"></path>
</g>
</svg>
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>
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