How to center a text within a object in SVG? - html
I have a svg where I need to center align the text within a object.
When I do text-anchor:middle,the text is aligning inside the object, Can someone guide me to about the issue?
<svg xmlns="http://www.w3.org/2000/svg" width="190.661" height="149.207" viewBox="0 0 40.357 31.582" id="svg8">
<g id="layer1" transform="translate(-84.848 -70.562)">
<g id="g3196" transform="matrix(.13679 0 0 .13679 88.795 70.148)" fill="#ff9f10">
<path id="path3192" fill="#f9be20" fill-opacity=".949" d="M234.995 92.878c3.44-4.291 2.202-9.754-2.754-12.141L195.62 63.1c-4.956-2.386-10.011-8.726-11.235-14.088L175.34 9.381c-1.225-5.362-6.28-7.797-11.236-5.411l-36.62 17.629c-4.956 2.385-13.064 2.383-18.02-.004L72.841 3.946c-4.955-2.388-10.011.045-11.235 5.407l-9.044 39.593c-1.225 5.361-6.283 11.693-11.24 14.075L4.71 80.601c-4.957 2.383-6.203 7.83-2.769 12.125l25.321 31.633c3.435 4.295 5.239 12.136 4.011 17.496L22.249 181.1c-1.229 5.36 2.266 9.503 7.766 9.503h40.646c5.5 0 12.806 3.763 16.234 8.063l25.343 32.024c3.429 4.3 9.04 4.3 12.469 0l25.344-32.024c3.43-4.3 10.735-8.063 16.235-8.063h40.649c5.5 0 8.994-4.143 7.765-9.503l-9.027-39.123c-1.229-5.36.58-13.258 4.021-17.548zm-116.522 89.547c-38.638 0-70.072-31.434-70.072-70.072 0-38.638 31.434-70.072 70.072-70.072 38.638 0 70.072 31.434 70.072 70.072 0 38.638-31.434 70.072-70.072 70.072z" />
</g>
<path id="path871" fill="none" stroke="#fff000" stroke-width=".238" stroke-opacity="0" d="M84.88 101.99c13.095-3.758 26.52-3.707 40.294 0" />
<text x="96.119" y="89.281" id="text3211" font-weight="400"font-size="12.154" font-family="Yeon Sung" letter-spacing="0" word-spacing="0" stroke-width=".326" style="line-height:1.25;-inkscape-font-specification:'Yeon Sung';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start">
<tspan id="tspan3209" x="96.119" y="89.281" style="-inkscape-font-specification:'Yeon Sung'">2</tspan>
</text>
</g>
</svg>
I have pasted the svg,the object is basically a star. I need to align center inside the star, but it is alinging within the borders of the star.
NOTE: The number inside the object is dynamic and can be in a range of between 0-999.
Your problem has a very simple cause. The x coordinate of your text is not in the middle of your shape. We can see that by adding a small red circle that has the same coordinates as your text:
<svg xmlns="http://www.w3.org/2000/svg" width="190.661" height="149.207" viewBox="0 0 40.357 31.582" id="svg8">
<g id="layer1" transform="translate(-84.848 -70.562)">
<g id="g3196" transform="matrix(.13679 0 0 .13679 88.795 70.148)" fill="#ff9f10">
<path id="path3192" d="M234.995 92.878c3.44-4.291 2.202-9.754-2.754-12.141L195.62 63.1c-4.956-2.386-10.011-8.726-11.235-14.088L175.34 9.381c-1.225-5.362-6.28-7.797-11.236-5.411l-36.62 17.629c-4.956 2.385-13.064 2.383-18.02-.004L72.841 3.946c-4.955-2.388-10.011.045-11.235 5.407l-9.044 39.593c-1.225 5.361-6.283 11.693-11.24 14.075L4.71 80.601c-4.957 2.383-6.203 7.83-2.769 12.125l25.321 31.633c3.435 4.295 5.239 12.136 4.011 17.496L22.249 181.1c-1.229 5.36 2.266 9.503 7.766 9.503h40.646c5.5 0 12.806 3.763 16.234 8.063l25.343 32.024c3.429 4.3 9.04 4.3 12.469 0l25.344-32.024c3.43-4.3 10.735-8.063 16.235-8.063h40.649c5.5 0 8.994-4.143 7.765-9.503l-9.027-39.123c-1.229-5.36.58-13.258 4.021-17.548zm-116.522 89.547c-38.638 0-70.072-31.434-70.072-70.072 0-38.638 31.434-70.072 70.072-70.072 38.638 0 70.072 31.434 70.072 70.072 0 38.638-31.434 70.072-70.072 70.072z" fill="#f9be20" fill-opacity=".949"/>
</g>
<path d="M84.88 101.99c13.095-3.758 26.52-3.707 40.294 0" id="path871" fill="none" stroke="#fff000" stroke-width=".238" stroke-opacity="0"/>
<text style="line-height:1.25;-inkscape-font-specification:'Yeon Sung';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start" x="96.119" y="89.281" id="text3211" font-weight="400" font-size="12.154" font-family="Yeon Sung" letter-spacing="0" word-spacing="0" stroke-width=".326"><tspan id="tspan3209" x="96.119" y="89.281" style="-inkscape-font-specification:'Yeon Sung'">2</tspan></text>
<circle cx="96.119" cy="89.281" r="1" fill="red"/>
</g>
</svg>
All text-anchor="middle" does is centre your piece of text at the x coordinate you provide. If that position is on the left of the SVG, then your string of text will be centred at a point on the left of the SVG.
To fix this, you need to update your text position. The centre of your shape is at approx 105.
<svg xmlns="http://www.w3.org/2000/svg" width="190.661" height="149.207" viewBox="0 0 40.357 31.582" id="svg8">
<g id="layer1" transform="translate(-84.848 -70.562)">
<g id="g3196" transform="matrix(.13679 0 0 .13679 88.795 70.148)" fill="#ff9f10">
<path id="path3192" d="M234.995 92.878c3.44-4.291 2.202-9.754-2.754-12.141L195.62 63.1c-4.956-2.386-10.011-8.726-11.235-14.088L175.34 9.381c-1.225-5.362-6.28-7.797-11.236-5.411l-36.62 17.629c-4.956 2.385-13.064 2.383-18.02-.004L72.841 3.946c-4.955-2.388-10.011.045-11.235 5.407l-9.044 39.593c-1.225 5.361-6.283 11.693-11.24 14.075L4.71 80.601c-4.957 2.383-6.203 7.83-2.769 12.125l25.321 31.633c3.435 4.295 5.239 12.136 4.011 17.496L22.249 181.1c-1.229 5.36 2.266 9.503 7.766 9.503h40.646c5.5 0 12.806 3.763 16.234 8.063l25.343 32.024c3.429 4.3 9.04 4.3 12.469 0l25.344-32.024c3.43-4.3 10.735-8.063 16.235-8.063h40.649c5.5 0 8.994-4.143 7.765-9.503l-9.027-39.123c-1.229-5.36.58-13.258 4.021-17.548zm-116.522 89.547c-38.638 0-70.072-31.434-70.072-70.072 0-38.638 31.434-70.072 70.072-70.072 38.638 0 70.072 31.434 70.072 70.072 0 38.638-31.434 70.072-70.072 70.072z" fill="#f9be20" fill-opacity=".949"/>
</g>
<path d="M84.88 101.99c13.095-3.758 26.52-3.707 40.294 0" id="path871" fill="none" stroke="#fff000" stroke-width=".238" stroke-opacity="0"/>
<text style="line-height:1.25;-inkscape-font-specification:'Yeon Sung';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start" id="text3211" font-weight="400" font-size="12.154" font-family="Yeon Sung" letter-spacing="0" word-spacing="0" stroke-width=".326"
text-anchor="middle">
<tspan id="tspan3209" x="105" y="89.281" style="-inkscape-font-specification:'Yeon Sung'">2</tspan>
</text>
</g>
</svg>
Related
How to cut text on svg so that after a word was cut, it would be possible to see through that cut space
I have an SVG file that I found on the web and it has a text "AX DESIGN" and if I use that svg file in html and put it on top of, say, another div(which has background color of RED) then I can see div's background color through that AX DESIGN text area. I also wanted to add another text which is also possible to see through that text. What online tool can I use to achieve that? By the way here is that photo <svg width="1145" height="1025" viewBox="0 0 1145 1025" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M1145 0H0V1025H1145V0ZM290.4 516.8L289.4 516.6C288.333 516.467 287.333 516.067 286.4 515.4C285.2 514.733 284.067 513.933 283 513C282.067 512.067 281.133 511 280.2 509.8C279.267 508.467 278.467 507.333 277.8 506.4C277.133 505.467 276.4 504.133 275.6 502.4C274.933 500.667 274.4 499.467 274 498.8C273.733 498 273.2 496.6 272.4 494.6C271.6 492.6 271.067 491.333 270.8 490.8L261.8 467.6C258.467 459.2 255 450.067 251.4 440.2L241.2 413.2C239.333 408.4 236.667 401.2 233.2 391.6C232.667 390.4 231.867 388.533 230.8 386C229.867 383.333 229.133 381.333 228.6 380L228.4 379.2L204.2 374C205.667 375.067 206.867 376.333 207.8 377.8C208.2 378.2 208.8 379.267 209.6 381L214.2 393.2L191.2 453.6L172.6 502.8C171.267 505.333 169.8 507.533 168.2 509.4C166.6 511.267 165.2 512.667 164 513.6C162.933 514.533 161.733 515.267 160.4 515.8C159.2 516.333 158.4 516.667 158 516.8H157V520H197V516.8H193.2C190.667 516.667 187.867 515.8 184.8 514.2C181.867 512.6 179.933 510.2 179 507C178.067 503.667 178.267 499.8 179.6 495.4L188.6 471.6L191.2 464.6H241.8L244.4 471.6L253.8 496.2C254.467 498.067 254.933 499.8 255.2 501.4C255.6 504.467 255.4 507.067 254.6 509.2C253.8 511.333 252.733 512.867 251.4 513.8C250.067 514.733 248.467 515.467 246.6 516C244.867 516.533 243.6 516.8 242.8 516.8H241.2V520H290.4V516.8ZM240.2 460.6H192.8L195.4 453.6L216.2 398.8L216.4 398.2L237.6 453.6L240.2 460.6ZM439.328 513.4C441.061 514.733 443.461 515.533 446.528 515.8V520H399.728V515.8L404.328 515.6C410.995 515.467 414.328 514.4 414.328 512.4C414.328 511.467 413.528 509.733 411.928 507.2L377.728 454.8L371.528 463.8C367.528 469.8 363.195 476.267 358.528 483.2C353.995 490.133 351.195 494.6 350.128 496.6L349.328 498.2C347.995 501.4 347.328 504 347.328 506C347.328 512.267 353.461 515.6 365.728 516V520H320.328V516C324.995 515.2 329.461 512.8 333.728 508.8C335.461 507.333 337.861 504.6 340.928 500.6L374.928 450.4L332.528 385.6C331.461 384 330.795 382.933 330.528 382.4C328.928 379.733 327.528 377.8 326.328 376.6C325.261 375.533 323.795 374.6 321.928 373.8H346.928L386.728 435L409.928 401.8C414.595 395.267 416.928 390.067 416.928 386.2C416.928 381.533 412.928 378.8 404.928 378H404.528H403.728H402.728H401.728C401.328 377.867 401.061 377.8 400.928 377.8V373.8H442.328V377.8C434.595 378.867 426.795 385.2 418.928 396.8L389.928 440L431.528 503.2V503.4C432.861 505.4 433.661 506.533 433.928 506.8C436.728 510.533 438.528 512.733 439.328 513.4ZM542.214 449C539.947 448.2 537.514 447.633 534.914 447.3C533.247 447.033 531.38 446.9 529.314 446.9H511.814H508.814H497.514V448.8H499.714C501.114 448.867 502.514 449.467 503.914 450.6C505.38 451.733 506.114 453.4 506.114 455.6V511.6C506.047 512.933 505.714 514.1 505.114 515.1C504.514 516.033 503.814 516.667 503.014 517C502.214 517.333 501.38 517.633 500.514 517.9C499.647 518.1 498.947 518.167 498.414 518.1C497.947 518.033 497.68 518.033 497.614 518.1V520H506.114H515.114H523.914C527.047 520 530.047 519.8 532.914 519.4C535.847 518.933 539.114 517.933 542.714 516.4C546.38 514.8 549.514 512.733 552.114 510.2C554.78 507.667 557.047 504.033 558.914 499.3C560.847 494.5 561.88 488.933 562.014 482.6C562.147 477.467 561.647 472.867 560.514 468.8C559.38 464.733 557.914 461.467 556.114 459C554.314 456.533 552.114 454.433 549.514 452.7C546.98 450.967 544.547 449.733 542.214 449ZM541.614 513.3C539.68 514.7 537.18 515.867 534.114 516.8C531.114 517.733 527.714 518.2 523.914 518.2C522.314 518.2 521.147 518.167 520.414 518.1C519.747 518.033 518.914 517.833 517.914 517.5C516.98 517.1 516.28 516.433 515.814 515.5C515.414 514.5 515.18 513.2 515.114 511.6V454.9C515.247 453.033 515.814 451.633 516.814 450.7C517.814 449.7 518.814 449.133 519.814 449C520.88 448.8 522.38 448.7 524.314 448.7H525.414C526.48 448.767 527.68 448.867 529.014 449C530.414 449.067 531.98 449.333 533.714 449.8C535.514 450.267 537.214 450.933 538.814 451.8C540.48 452.667 542.114 453.967 543.714 455.7C545.38 457.367 546.814 459.4 548.014 461.8C549.28 464.133 550.28 467.167 551.014 470.9C551.747 474.567 552.114 478.733 552.114 483.4C552.114 485.533 552.08 487.367 552.014 488.9C551.947 490.433 551.714 492.5 551.314 495.1C550.98 497.7 550.447 499.933 549.714 501.8C549.047 503.667 548.014 505.7 546.614 507.9C545.214 510.1 543.547 511.9 541.614 513.3ZM649.482 520V499.5H647.082C647.082 502.1 646.916 504.4 646.582 506.4C646.249 508.333 645.616 510.233 644.682 512.1C643.749 513.967 642.316 515.4 640.382 516.4C638.449 517.4 636.049 517.9 633.182 517.9H622.082C616.682 517.9 613.849 515.867 613.582 511.8V484.2H621.082C624.749 484.333 627.182 485.567 628.382 487.9C629.582 490.233 630.182 493.4 630.182 497.4H631.982V468.8H630.182C630.182 470.667 630.049 472.3 629.782 473.7C629.582 475.1 629.182 476.467 628.582 477.8C627.982 479.133 627.016 480.2 625.682 481C624.349 481.733 622.682 482.133 620.682 482.2H613.582V455.1C613.849 450.967 616.682 448.9 622.082 448.9H630.682C633.549 448.9 635.949 449.3 637.882 450.1C639.816 450.9 641.249 452.1 642.182 453.7C643.116 455.3 643.749 457 644.082 458.8C644.416 460.6 644.582 462.767 644.582 465.3H646.982V446.9H641.182H622.082H613.582H604.582H595.982V448.3L597.982 448.4C599.382 448.533 600.782 449.2 602.182 450.4C603.649 451.533 604.449 453.2 604.582 455.4V512C604.449 513.267 604.049 514.367 603.382 515.3C602.716 516.233 602.016 516.9 601.282 517.3C600.549 517.7 599.716 518.033 598.782 518.3C597.849 518.5 597.182 518.6 596.782 518.6H595.982V520H604.582H649.482ZM722.214 488.4C718.547 484.067 713.38 480.267 706.714 477C702.514 474.933 699.18 472.7 696.714 470.3C694.247 467.833 692.714 465.7 692.114 463.9C691.514 462.1 691.347 460.267 691.614 458.4C691.88 456.533 692.147 455.3 692.414 454.7C692.747 454.1 693.047 453.633 693.314 453.3C694.38 451.833 695.58 450.567 696.914 449.5C699.914 447.3 703.914 446.9 708.914 448.3C711.047 448.967 712.58 449.667 713.514 450.4C714.514 451.133 715.48 452.133 716.414 453.4C717.747 455.2 718.947 457.533 720.014 460.4C720.88 463.067 721.347 465.367 721.414 467.3H723.714V457.7L723.914 446H721.914L721.714 447.4C721.447 448.467 721.08 449.3 720.614 449.9C719.68 451.167 717.914 450.933 715.314 449.2C713.247 447.867 711.08 446.9 708.814 446.3C707.48 445.9 705.847 445.633 703.914 445.5H703.614C702.414 445.5 701.514 445.533 700.914 445.6C698.247 445.933 695.714 446.633 693.314 447.7C689.714 449.433 687.147 451.9 685.614 455.1C684.28 457.9 683.747 461.3 684.014 465.3L684.114 466.4C684.114 467.133 684.314 468.133 684.714 469.4C685.114 470.6 685.647 471.933 686.314 473.4C687.047 474.8 688.18 476.3 689.714 477.9C691.314 479.5 693.147 480.9 695.214 482.1C698.88 484.233 701.814 486.033 704.014 487.5C706.214 488.9 708.68 490.733 711.414 493C714.147 495.2 716.08 497.433 717.214 499.7C718.414 501.967 718.814 504.3 718.414 506.7C717.947 509.767 716.847 512.467 715.114 514.8C713.38 517.067 711.114 518.467 708.314 519C706.18 519.467 703.98 519.5 701.714 519.1C701.114 519.033 700.147 518.8 698.814 518.4C697.014 517.8 695.614 517.1 694.614 516.3C693.48 515.433 692.48 514.433 691.614 513.3C690.08 511.3 688.847 509 687.914 506.4C686.714 503.133 686.047 499.733 685.914 496.2V495.8H683.614L683.714 508.6L683.514 520.6H685.414L685.714 519.1C686.114 517.7 686.58 516.733 687.114 516.2C687.847 515.6 688.814 515.567 690.014 516.1C690.28 516.233 691.347 516.9 693.214 518.1C694.147 518.7 695.214 519.2 696.414 519.6C698.48 520.467 700.78 521 703.314 521.2C705.18 521.467 707.58 521.4 710.514 521C714.247 520.333 717.38 519.133 719.914 517.4C723.78 514.733 726.18 511.133 727.114 506.6C727.514 504.8 727.714 503.033 727.714 501.3C727.714 496.967 725.88 492.667 722.214 488.4ZM785.87 518.6H786.77V520H760.67V518.6L762.47 518.5C763.603 518.433 764.837 517.967 766.17 517.1C767.57 516.233 768.503 515 768.97 513.4C769.17 512.733 769.27 512.067 769.27 511.4V451.1C769.27 450.7 769.203 450.1 769.07 449.3C768.737 448.233 768.37 447.433 767.97 446.9L778.27 453.4V511.5C778.337 512.9 778.67 514.1 779.27 515.1C779.937 516.1 780.637 516.833 781.37 517.3C782.103 517.7 782.937 518.033 783.87 518.3C784.87 518.5 785.537 518.6 785.87 518.6ZM883.407 488.6C881.807 488.8 879.673 488.9 877.007 488.9H865.707L858.107 488.6V490.7C861.307 490.833 863.573 491.133 864.907 491.6C867.173 492.733 868.307 494.9 868.307 498.1L868.507 508.4V510.6V511.5C868.373 512.433 868.173 513.2 867.907 513.8C867.44 514.667 866.673 515.467 865.607 516.2L865.307 516.4C862.107 518.133 858.907 519.133 855.707 519.4H854.807C852.74 519.4 851.007 519.267 849.607 519C842.073 517.267 836.54 511.033 833.007 500.3C830.607 493.167 829.773 485.733 830.507 478C831.373 468.267 833.74 460.733 837.607 455.4C840.54 451.467 844.173 448.933 848.507 447.8C849.773 447.533 851.273 447.4 853.007 447.4C857.94 447.4 862.573 448.833 866.907 451.7C868.173 452.567 869.273 453.567 870.207 454.7C871.407 456.1 872.307 457.467 872.907 458.8C874.107 461.2 875.04 464.5 875.707 468.7C875.84 469.5 875.907 470.1 875.907 470.5V470.6H878.407V470.5V470.1C878.407 459.1 878.54 451.367 878.807 446.9H876.407V447.4L876.107 449.2C875.84 450.4 875.507 451.333 875.107 452C874.84 452.4 874.573 452.667 874.307 452.8C873.84 453.2 873.007 452.967 871.807 452.1C869.673 450.633 867.94 449.533 866.607 448.8C865.34 448 863.507 447.233 861.107 446.5C858.773 445.767 856.24 445.4 853.507 445.4C851.507 445.4 850.007 445.467 849.007 445.6C848.34 445.733 847.873 445.8 847.607 445.8C843.54 446.533 839.84 447.9 836.507 449.9C825.373 456.433 819.807 468.067 819.807 484.8C819.807 487.733 820.04 490.567 820.507 493.3C822.04 502.7 825.873 509.833 832.007 514.7C837.473 519.3 844.373 521.6 852.707 521.6H853.007C853.273 521.6 853.673 521.567 854.207 521.5H855.407C860.607 521.167 865.44 519.3 869.907 515.9C871.507 514.7 872.64 514.1 873.307 514.1C874.107 514.1 874.74 514.767 875.207 516.1C875.74 517.367 876.04 518.667 876.107 520H879.007L878.707 507L878.807 495.6V495.2C878.807 493.133 879.507 491.767 880.907 491.1C881.84 490.833 882.673 490.7 883.407 490.7V488.6ZM982.294 446.9H962.394V448.3L964.694 448.4C966.161 448.533 967.661 449.2 969.194 450.4C970.727 451.6 971.561 453.3 971.694 455.5V503.9L934.894 446.9H917.494V448.6H919.494C920.827 448.667 922.194 449.233 923.594 450.3C925.061 451.367 925.861 452.967 925.994 455.1V511.3C925.994 512.1 925.961 512.667 925.894 513C925.628 514.133 925.128 515.1 924.394 515.9C923.727 516.633 923.027 517.167 922.294 517.5C921.628 517.833 920.861 518.1 919.994 518.3C919.128 518.5 918.527 518.6 918.194 518.6H917.494V520H936.594V518.6L934.794 518.5C933.594 518.433 932.294 517.967 930.894 517.1C929.494 516.167 928.594 514.833 928.194 513.1C928.061 512.3 927.994 511.7 927.994 511.3V452.8L971.394 520H973.694V455.4C973.761 454 974.094 452.8 974.694 451.8C975.361 450.8 976.061 450.1 976.794 449.7C977.594 449.233 978.461 448.9 979.394 448.7C980.394 448.433 981.061 448.3 981.394 448.3H982.294V446.9Z" fill="#252424"/> <defs> <mask id="mymask"> <rect width="100%" height="100%" fill="white"/> <text x="320" y="140" text-anchor="middle" font-size="40px" >Some transparent text</text> <text x="320" y="190" text-anchor="middle" font-size="40px" >has been placed here</text> <rect x="220" y="300" width="200" height="50" fill="black"/> <text x="320" y="335" text-anchor="middle" fill="white" font-size="30px">BUTTON</text> </mask> </defs> <rect fill="black" fill-opacity="0.7" width="100%" height="100%" mask="url(#mymask)"/> </svg>
In SVG you can draw rectangle with a hole by drawing the rectangle in one direction and the hole the other way round.
<svg viewBox="0 0 100 50">
<path d="M0,0v50h100v-50h-100
M10,10h80v30h-80v-30"/>
</svg>
If for some reason you can't do that you can use fill-rule="evenodd"
<svg viewBox="0 0 100 50">
<path d="M0,00h100v50h-100v-50
M10,10h80v30h-80v-30" fill-rule="evenodd"/>
</svg>
Apparently this is what they are doing at axcapital. I suppose they used illustrator or another editor to draw the paths for the letters.
For example this is the code to draw the X:
svg{width:200px;}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="300 350 200 200" >
<path id="X" d="M439.328 513.4C441.061 514.733 443.461 515.533 446.528 515.8V520H399.728V515.8L404.328 515.6C410.995 515.467 414.328 514.4 414.328 512.4C414.328 511.467 413.528 509.733 411.928 507.2L377.728 454.8L371.528 463.8C367.528 469.8 363.195 476.267 358.528 483.2C353.995 490.133 351.195 494.6 350.128 496.6L349.328 498.2C347.995 501.4 347.328 504 347.328 506C347.328 512.267 353.461 515.6 365.728 516V520H320.328V516C324.995 515.2 329.461 512.8 333.728 508.8C335.461 507.333 337.861 504.6 340.928 500.6L374.928 450.4L332.528 385.6C331.461 384 330.795 382.933 330.528 382.4C328.928 379.733 327.528 377.8 326.328 376.6C325.261 375.533 323.795 374.6 321.928 373.8H346.928L386.728 435L409.928 401.8C414.595 395.267 416.928 390.067 416.928 386.2C416.928 381.533 412.928 378.8 404.928 378H404.528H403.728H402.728H401.728C401.328 377.867 401.061 377.8 400.928 377.8V373.8H442.328V377.8C434.595 378.867 426.795 385.2 418.928 396.8L389.928 440L431.528 503.2V503.4C432.861 505.4 433.661 506.533 433.928 506.8C436.728 510.533 438.528 512.733 439.328 513.4Z" fill="#252424"/>
</svg>
In order to make it a hole you need a path with a d attribute drawing first a rectangle M300,350h200v200h-200v-200 and next the X like so:
body{background:gold;}
svg{width:200px;}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="300 350 200 200" width="300" >
<path id="X" fill-rule="evenodd" d="
M300,350h200v200h-200v-200
M439.328 513.4C441.061 514.733 443.461 515.533 446.528 515.8V520H399.728V515.8L404.328 515.6C410.995 515.467 414.328 514.4 414.328 512.4C414.328 511.467 413.528 509.733 411.928 507.2L377.728 454.8L371.528 463.8C367.528 469.8 363.195 476.267 358.528 483.2C353.995 490.133 351.195 494.6 350.128 496.6L349.328 498.2C347.995 501.4 347.328 504 347.328 506C347.328 512.267 353.461 515.6 365.728 516V520H320.328V516C324.995 515.2 329.461 512.8 333.728 508.8C335.461 507.333 337.861 504.6 340.928 500.6L374.928 450.4L332.528 385.6C331.461 384 330.795 382.933 330.528 382.4C328.928 379.733 327.528 377.8 326.328 376.6C325.261 375.533 323.795 374.6 321.928 373.8H346.928L386.728 435L409.928 401.8C414.595 395.267 416.928 390.067 416.928 386.2C416.928 381.533 412.928 378.8 404.928 378H404.528H403.728H402.728H401.728C401.328 377.867 401.061 377.8 400.928 377.8V373.8H442.328V377.8C434.595 378.867 426.795 385.2 418.928 396.8L389.928 440L431.528 503.2V503.4C432.861 505.4 433.661 506.533 433.928 506.8C436.728 510.533 438.528 512.733 439.328 513.4Z" fill="#252424"/>
</svg>
Please observe that the path has fill-rule="evenodd".
SVG element aligns center in Chrome browser but it should align to the right
I have svg elements that is positioned to the right. This alignment works fine in Firefox but when I open my webpage in Chrome browser the SVG element is positioned at the center of a section. <html> <svg style="position:absolute;right:0;" width="auto" height="120%" viewBox="0 0 116 253" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0)"> <path d="M59.1636 98.0787C48.2396 99.6774 44.5051 100.519 34.7033 106.062C24.9015 111.606 16.8079 119.731 11.3034 129.555C5.7989 139.379 3.0943 150.524 3.48398 161.778C3.87366 173.032 7.34269 183.963 13.5135 193.383C19.6844 202.802 28.3206 210.348 38.4823 215.201C48.6441 220.053 59.942 222.025 71.1466 220.902C82.3512 219.779 92.3976 216.622 101.394 209.85C110.391 203.078 111.786 201.191 118.313 188.935L119.315 181.351C115.345 191.285 108.726 199.94 100.179 206.373C91.6319 212.806 81.791 218.109 71.1466 219.176C60.5022 220.243 48.136 218.723 38.4823 214.113C28.8287 209.504 20.264 202.331 14.4017 193.383C8.53939 184.434 4.78037 172.469 4.41017 161.778C4.03997 151.087 6.07412 142.581 11.3034 133.249C16.5327 123.916 26.9068 114.008 36.2185 108.742C45.5303 103.475 56.108 100.864 66.8007 101.192L59.1636 98.0787Z" fill="#C4C4C4" fill-opacity="0.5"/> <path d="M63.4178 41.2475C56.6489 43.02 50.6873 47.0487 46.518 52.668C42.3487 58.2872 40.2213 65.1608 40.4874 72.1528C40.7534 79.1448 43.3969 85.8369 47.9811 91.1231C52.5653 96.4094 59.3403 99.8898 66.2243 101.143L59.2968 98.2119C53.8348 95.0146 53.1124 94.5766 48.9866 89.819C44.8608 85.0614 42.4841 78.4456 42.2447 72.1528C42.0052 65.86 42.7656 59.573 46.518 54.5157C50.2703 49.4583 55.0699 45.7197 61.1619 44.1245L63.4178 41.2475Z" fill="#C4C4C4" fill-opacity="0.5"/> <path d="M12.7873 92.5315C19.5273 100.432 23.0393 106.482 26.5414 114.654C25.2887 104.9 25.0264 97.7404 25.1272 92.7738C25.1724 90.5464 25.2907 88.7598 25.4254 87.3778C23.8135 89.2058 22.4806 90.2382 20.832 90.8877C19.681 91.3412 18.4161 91.5927 16.8924 91.8482C16.4992 91.9141 16.0869 91.9806 15.6507 92.0509C14.7991 92.1882 13.8564 92.3401 12.7873 92.5315Z" stroke="#C4C4C4" stroke-opacity="0.5" stroke-width="2"/> <path d="M33.2938 68.7639C30.4436 64.512 28.6665 61.1848 26.1622 55.2208C23.7429 61.1064 22.0473 64.4274 19.3202 68.8562C22.1626 73.9448 23.8536 77.4954 26.0165 83.0088C26.9853 79.7262 27.7752 77.424 28.7285 75.4494C29.8636 73.0982 31.2145 71.2427 33.2938 68.7639Z" stroke="#C4C4C4" stroke-opacity="0.5" stroke-width="2"/> </g> <defs> <clipPath id="clip0"> <rect width="116" height="253" fill="white" transform="matrix(-1 0 0 1 116 0)"/> </clipPath> </defs> </svg> </html>
Try using this preserveAspectRatio="xMaxYMin meet" <svg style="position:absolute;right:0;" width="auto" height="100%" viewBox="0 0 116 253" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMaxYMin meet"> <g clip-path="url(#clip0)"> <path d="M59.1636 98.0787C48.2396 99.6774 44.5051 100.519 34.7033 106.062C24.9015 111.606 16.8079 119.731 11.3034 129.555C5.7989 139.379 3.0943 150.524 3.48398 161.778C3.87366 173.032 7.34269 183.963 13.5135 193.383C19.6844 202.802 28.3206 210.348 38.4823 215.201C48.6441 220.053 59.942 222.025 71.1466 220.902C82.3512 219.779 92.3976 216.622 101.394 209.85C110.391 203.078 111.786 201.191 118.313 188.935L119.315 181.351C115.345 191.285 108.726 199.94 100.179 206.373C91.6319 212.806 81.791 218.109 71.1466 219.176C60.5022 220.243 48.136 218.723 38.4823 214.113C28.8287 209.504 20.264 202.331 14.4017 193.383C8.53939 184.434 4.78037 172.469 4.41017 161.778C4.03997 151.087 6.07412 142.581 11.3034 133.249C16.5327 123.916 26.9068 114.008 36.2185 108.742C45.5303 103.475 56.108 100.864 66.8007 101.192L59.1636 98.0787Z" fill="#C4C4C4" fill-opacity="0.5"/> <path d="M63.4178 41.2475C56.6489 43.02 50.6873 47.0487 46.518 52.668C42.3487 58.2872 40.2213 65.1608 40.4874 72.1528C40.7534 79.1448 43.3969 85.8369 47.9811 91.1231C52.5653 96.4094 59.3403 99.8898 66.2243 101.143L59.2968 98.2119C53.8348 95.0146 53.1124 94.5766 48.9866 89.819C44.8608 85.0614 42.4841 78.4456 42.2447 72.1528C42.0052 65.86 42.7656 59.573 46.518 54.5157C50.2703 49.4583 55.0699 45.7197 61.1619 44.1245L63.4178 41.2475Z" fill="#C4C4C4" fill-opacity="0.5"/> <path d="M12.7873 92.5315C19.5273 100.432 23.0393 106.482 26.5414 114.654C25.2887 104.9 25.0264 97.7404 25.1272 92.7738C25.1724 90.5464 25.2907 88.7598 25.4254 87.3778C23.8135 89.2058 22.4806 90.2382 20.832 90.8877C19.681 91.3412 18.4161 91.5927 16.8924 91.8482C16.4992 91.9141 16.0869 91.9806 15.6507 92.0509C14.7991 92.1882 13.8564 92.3401 12.7873 92.5315Z" stroke="#C4C4C4" stroke-opacity="0.5" stroke-width="2"/> <path d="M33.2938 68.7639C30.4436 64.512 28.6665 61.1848 26.1622 55.2208C23.7429 61.1064 22.0473 64.4274 19.3202 68.8562C22.1626 73.9448 23.8536 77.4954 26.0165 83.0088C26.9853 79.7262 27.7752 77.424 28.7285 75.4494C29.8636 73.0982 31.2145 71.2427 33.2938 68.7639Z" stroke="#C4C4C4" stroke-opacity="0.5" stroke-width="2"/> </g> <defs> <clipPath id="clip0"> <rect width="116" height="253" fill="white" transform="matrix(-1 0 0 1 116 0)"/> </clipPath> </defs> </svg>
html - images and svg elements
I'm working on an interactive map but can't put images on it. The .svg map is developed on Inkscape, and is divided into districts. I need to put images in these districts. I wrote some code for this but it's only working in the Firefox browser. When i point with my mouse on this image the whole page starting to lag. In Opera and Chrome browsers this image is displayed in low resolution. This part of the code from begining to this district on picture included: <svg version="1.1" id="svg2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1771.6535 1771.6535" style="enable-background:new 0 0 1771.6535 1771.6535;" xml:space="preserve"> <defs> <pattern id="img1" width="100" height="100" patternUnits="objectBoundingBox"> <image xlink:href="./Regions/Arbuzinka.png" x="-5%" y="-5%" width="30%" height="30%" /> </pattern> </defs> <a class="Arbuzinka" href="http://arbuzinkabib.tk"> <g inkscape:groupmode="layer" id="layer18" inkscape:label="Арбузинка" style="display:inline" transform="translate(0,719.29131)"> <path class="region" d="m 629.95741,-565.91816 -8.12988,-0.12207 -0.0732,5.44434 -6.5918,-0.19532 -0.34179,8.44727 -4.68754,-0.0244 -0.1709,6.03027 -2.417,5.46875 1.001,10.4248 1.3183,5.78614 2.6368,19.09179 -6.2989,3.24707 0.708,11.18164 -67.1374,30.41936 -0.5006,20.95771 5.9731,2.90024 0.086,0.0345 -2.7967,12.74035 -11.1862,15.28424 -3.1616,2.51465 -2.1179,3.76587 3.1298,3.97637 -2.2326,19.18647 8.5855,17.2133 6.2925,6.95713 4.7647,3.50446 6.2972,0.34025 5.5664,9.79005 5.1514,13.35449 3.7598,7.56836 1.1718,3.51562 3.125,3.90625 2.5391,4.29688 -0.1953,1.95312 -1.3672,3.32032 -1.1719,3.90625 -1.3672,2.73437 -2.539,2.92969 -1.7578,4.10156 -0.586,1.95313 1.3672,1.75781 3.125,1.75781 2.5391,1.5625 2.9297,0.78125 3.9062,0.58594 2.3438,0 3.7109,0.58594 2.3438,1.17187 3.3203,1.36719 3.5156,2.14844 2.3437,1.75781 1.7579,0.68359 1.6601,1.85547 1.2695,0.68359 -0.3906,2.63672 -0.5859,3.51563 -0.6836,1.36719 -0.293,2.14843 0.7813,1.17188 0.9765,1.75781 2.5606,6.38337 0.6215,1.38107 0.6215,1.86444 0.2762,1.9335 c 0,0 0.2762,0.69053 0.1381,0.96675 -0.1381,0.27621 -0.5524,1.93349 -0.5524,1.93349 l 0.069,1.31202 -0.8977,1.86444 c 0,0 -0.1381,1.24296 -0.2071,1.58823 -0.069,0.34526 0.069,1.51917 0.069,1.79538 0,0.27622 0.069,0.82864 0.069,1.24297 0,0.41432 -0.2072,1.86444 -0.2072,1.86444 l -0.1192,2.92068 0.293,1.36719 -0.4883,1.75781 0,0.87891 0,1.46484 0.293,1.07422 0.6836,0.78125 1.3672,1.36719 c 0,0 0.8789,1.17187 1.0742,1.5625 0.1953,0.39062 0.7812,0.78125 0.8789,1.46484 0.098,0.6836 0.098,1.17188 0.098,1.17188 0,0 0.098,0.19531 0.3906,0.78125 0.293,0.58593 0.6836,1.36718 0.6836,1.36718 l 0.098,0.48829 8.00789,-1.07422 27.83203,-7.22657 -0.87891,-8.00781 -2.24609,-8.10547 3.80859,-0.58593 -0.0977,-4.88282 5.95703,-2.24609 0.97656,- 4.98047 2.24609,-2.05078 2.83204,3.61328 12.98828,29.88281 6.83593,-1.46484 3.61329,-2.05078 20.50781,-3.71094 12.5,-3.71094 -1.75781,-16.11328 0.92773,-3.36914 20.70313,-1.95312 1.31835,7.61718 1.98143,5.99878 6.90529,-0.38354 11.42578,-2.88086 -3.72627,-19.28154 0.62148,-2.27876 6.90534,-1.0358 -3.93605,-25.3426 -1.45012,- 3.79793 -1.24296,-2.20971 2.48592,-1.45012 8.15516,-1.29299 4.58985,-0.73243 3.95508,-1.61132 0.73242,-1.07422 -0.87891,-5.07813 -2.24609,-7.91015 -16.37911,- 67.99604 -1.79539,-7.18155 -5.52427,-24.72112 -1.51917,-2.34781 -0.7098,-4.19881 -6.34765,0.14649 -1.07422,-1.12305 -1.31836,-11.18164 -7.66602,-2.7832 -3.18565,- 15.6627 0.69053,-2.62403 5.38617,-0.13811 -5.52428,-45.16092 2.62403,0.27621 0.82864,-0.82864 -1.60069,-14.76806 -4.29687,0.29297 0.39062,-18.65235 -3.22265,0 -4.10157,9.66797 -7.74675,9.71784 -14.95832,1.8056 -8.1543,4.66308 -1.46484,- 29.19921 -3.95508,-1.61133 -3.51563,0.75684 -32.32422,14.55077 -5.88379,1.00098 -0.78125,-0.0732 -0.63476,-0.43946 -0.53711,-0.63476 -1.87988,-4.3457 1.66015,- 2.70996 2.27051,0.39062 -4.69971,-19.86694 -2.47802,-3.32642 z" id="path3343" fill="url(#img1)" inkscape:connector-curvature="0" /> </g> </a> Thank you for any help.
SVGs are all rendering identical on rails
I'm trying to make a shared partial to render 3 SVG images, but when it goes to the browser it all looks like the 1st one. Here's the code created: <a href=""> <svg width="76" height="76" viewBox="0 0 76 76" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>GitHub</title> <g id="Canvas" transform="translate(1493 741)"> <g id="Vector"> <use xlink:href="#path0_fill" transform="translate(-1493 -740.815)" fill="#2B34E3"/> </g> </g> <defs> <path id="path0_fill" fill-rule="evenodd" d="M 22.1444 38.5311C 22.0763 38.5311 22.8917 40.2542 22.9144 40.2542C 24.6943 43.4256 28.1252 45.3971 33.9128 45.9441C 33.0873 46.5592 32.0951 47.7265 31.9575 49.0752C 30.9186 49.7345 28.8295 49.9525 27.2062 49.4496C 24.9303 48.745 24.0593 44.3244 20.6524 44.9546C 19.9152 45.0895 20.0616 45.5672 20.6991 45.9744C 21.738 46.6336 22.715 47.4592 23.4686 49.2151C 24.048 50.5639 25.2648 52.9727 29.1148 52.9727C 30.6422 52.9727 31.7126 52.7924 31.7126 52.7924C 31.7126 52.7924 31.7417 56.2349 31.7417 57.5735C 31.7417 59.1176 29.6185 59.5525 29.6185 60.295C 29.6185 60.5887 30.3216 60.6164 30.8858 60.6164C 32.0017 60.6164 34.323 59.7025 34.323 58.0979C 34.323 56.8235 34.3445 52.5391 34.3445 51.7878C 34.3445 50.1492 35.2395 49.6298 35.2395 49.6298C 35.2395 49.6298 35.3505 58.3777 35.0261 59.5525C 34.6449 60.9315 33.957 60.7361 33.957 61.3513C 33.957 62.2664 36.7517 61.5769 37.6782 59.5664C 38.3939 58.0046 38.0809 49.4193 38.0809 49.4193L 38.8446 49.4042C 38.8446 49.4042 38.8875 53.3332 38.861 55.1294C 38.8345 56.9899 38.7057 59.342 39.8317 60.4513C 40.5714 61.1811 42.9672 62.4605 42.9672 61.2908C 42.9672 60.6113 41.6544 60.0529 41.6544 58.2139L 41.6544 49.7496C 42.7034 49.7496 42.5456 52.5328 42.5456 52.5328L 42.6226 57.7046C 42.6226 57.7046 42.3904 59.5878 44.6991 60.3756C 45.5133 60.6567 47.2552 60.7324 47.3373 60.2622C 47.4193 59.792 45.2394 59.0924 45.2192 57.6353C 45.2065 56.7441 45.2596 56.2248 45.2596 52.3576C 45.2596 48.4903 44.7307 47.0609 42.8864 45.9214C 48.5769 45.3479 52.0999 43.9664 53.8154 40.2668C 53.9492 40.2706 54.516 38.5387 54.4415 38.5387C 54.8265 37.142 55.0348 35.4895 55.0752 33.5332C 55.0651 28.2265 52.4774 26.3496 51.9813 25.4685C 52.7134 21.4513 51.8576 19.6235 51.4612 18.9958C 49.9944 18.484 46.3603 20.313 44.3734 21.6013C 41.1369 20.6723 34.2927 20.7618 31.7265 21.8408C 26.9916 18.5143 24.486 19.0235 24.486 19.0235C 24.486 19.0235 22.8665 21.871 24.0581 26.0382C 22.5004 27.987 21.3391 29.366 21.3391 33.0202C 21.3403 35.0798 21.5878 36.9227 22.1444 38.5311ZM 0 0L 75.7377 0L 75.7377 75.6303L 0 75.6303L 0 0Z"/> </defs> </svg> </a> <a href=""> <svg width="76" height="76" viewBox="0 0 76 76" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Twitter</title> <g id="Canvas" transform="translate(1493 629)"> <g id="Vector"> <use xlink:href="#path0_fill" transform="translate(-1493 -628.63)" fill="#2B34E3"/> </g> </g> <defs> <path id="path0_fill" fill-rule="evenodd" d="M 43.1288 23.0458C 39.8229 24.2471 37.7338 27.3454 37.9711 30.7361L 38.0506 32.0445L 36.7277 31.8845C 31.9146 31.2706 27.7086 29.1882 24.1376 25.6891L 22.3918 23.9534L 21.9425 25.2353C 20.9907 28.0929 21.5991 31.1105 23.5822 33.1399C 24.64 34.2618 24.4014 34.4219 22.5774 33.7538C 21.9425 33.5408 21.3871 33.3807 21.334 33.4601C 21.1497 33.6479 21.7834 36.0769 22.2858 37.0387C 22.9738 38.3748 24.3749 39.6819 25.9099 40.4571L 27.2062 41.071L 25.6725 41.0975C 24.1919 41.0975 24.1389 41.1239 24.2979 41.6861C 24.8268 43.4218 26.9159 45.2647 29.2436 46.0664L 30.8833 46.6261L 29.4556 47.4807C 27.34 48.7109 24.8533 49.4042 22.3666 49.4559C 21.175 49.4824 20.1967 49.5895 20.1967 49.6702C 20.1967 49.9361 23.4244 51.4311 25.3014 52.0198C 30.935 53.7555 37.6277 53.0067 42.6529 50.0433C 46.224 47.9332 49.7937 43.7408 51.4612 39.6807C 52.3612 37.5189 53.26 33.566 53.26 31.6714C 53.26 30.4424 53.3395 30.2824 54.8202 28.8139C 55.6937 27.9592 56.5129 27.0252 56.672 26.758C 56.937 26.25 56.9093 26.25 55.5611 26.7038C 53.313 27.5055 52.9949 27.3983 54.107 26.1971C 54.9262 25.3424 55.9058 23.7933 55.9058 23.3395C 55.9058 23.2601 55.5094 23.3924 55.0588 23.6332C 54.5829 23.9004 53.5251 24.3013 52.7311 24.5408L 51.3034 24.9958L 50.007 24.1134C 49.2926 23.6332 48.2891 23.0987 47.7589 22.9387C 46.4095 22.5655 44.3457 22.6185 43.1288 23.0458ZM 0 0L 75.7377 0L 75.7377 75.6303L 0 75.6303L 0 0Z"/> </defs> </svg> </a> <a href=""> <svg width="76" height="76" viewBox="0 0 76 76" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Instagram</title> <g id="Canvas" transform="translate(1493 853)"> <g id="instagram"> <use xlink:href="#path0_fill" transform="translate(-1493 -853)" fill="#2B34E3"/> </g> </g> <defs> <path id="path0_fill" fill-rule="evenodd" d="M 75.7377 0L 0 0L 0 75.6302L 75.7377 75.6302L 75.7377 0ZM 53.6281 22.0783C 54.6815 23.1304 55.3254 24.1824 55.8082 25.4244C 56.2765 26.6226 56.5984 27.9961 56.6862 30.0125C 56.7887 32.0289 56.8032 32.6718 56.8032 37.8152C 56.8032 42.9297 56.7743 43.594 56.6876 45.5841L 56.6875 45.587L 56.6862 45.6178C 56.5984 47.6196 56.2765 49.0078 55.8082 50.2059C 55.3254 51.4479 54.6815 52.4999 53.6281 53.552C 52.5745 54.604 51.521 55.2469 50.2772 55.7291C 49.0774 56.1967 47.7019 56.5182 45.6826 56.6058C 43.6633 56.7081 43.0195 56.7227 37.8689 56.7227C 32.7489 56.7227 32.0823 56.6938 30.0911 56.6074L 30.0897 56.6074L 30.0552 56.6058C 28.0505 56.5182 26.6604 56.1967 25.4606 55.7291C 24.2168 55.2469 23.1632 54.604 22.1097 53.552C 21.0562 52.4999 20.4124 51.4479 19.9294 50.2059C 19.4612 49.0078 19.1393 47.6342 19.0515 45.6178C 18.9491 43.6014 18.9344 42.9585 18.9344 37.8152C 18.9344 32.7018 18.9634 32.0366 19.0499 30.0476L 19.0515 30.0125C 19.1393 28.0107 19.4612 26.6226 19.9294 25.4244C 20.4124 24.1824 21.0562 23.1304 22.1097 22.0783C 23.1632 21.0263 24.2168 20.3834 25.4606 19.9012C 26.6604 19.4336 28.0359 19.1122 30.0552 19.0245C 32.0745 18.9222 32.7183 18.9076 37.8689 18.9076C 42.9889 18.9076 43.6555 18.9365 45.6467 19.0229L 45.6481 19.0229L 45.6826 19.0245C 47.6873 19.1122 49.0774 19.4336 50.2772 19.9012C 51.521 20.3834 52.5745 21.0263 53.6281 22.0783ZM 52.6184 48.9639C 52.8818 48.3064 53.1891 47.2982 53.2769 45.4571L 53.2794 45.3996C 53.3652 43.4576 53.3939 42.8073 53.3939 37.8152C 53.3939 32.8447 53.3654 32.1927 53.2805 30.2565L 53.2805 30.2554L 53.2804 30.2534L 53.2769 30.1732C 53.1891 28.3322 52.8818 27.3386 52.6184 26.6664C 52.2672 25.7751 51.8575 25.1468 51.1991 24.4893C 50.5405 23.8317 49.8967 23.408 49.0188 23.072C 48.3604 22.8089 47.3507 22.5021 45.507 22.4144C 43.517 22.3121 42.9025 22.2975 37.8542 22.2975C 32.873 22.2975 32.2228 22.3259 30.2805 22.4109L 30.2014 22.4144C 28.3578 22.5021 27.3628 22.8089 26.6897 23.072C 25.7971 23.4226 25.1678 23.8317 24.5094 24.4893C 23.851 25.1468 23.4266 25.7897 23.0901 26.6664C 22.8267 27.324 22.5194 28.3322 22.4316 30.1732C 22.3292 32.1604 22.3146 32.7741 22.3146 37.8152C 22.3146 42.7856 22.3431 43.4376 22.428 45.3738L 22.428 45.3749L 22.4281 45.377L 22.4316 45.4571C 22.5194 47.2982 22.8267 48.2917 23.0901 48.9639C 23.4413 49.8552 23.851 50.4835 24.5094 51.1411C 25.1678 51.7986 25.8118 52.2223 26.6897 52.5584C 27.3481 52.8214 28.3578 53.1282 30.2014 53.2159C 32.1914 53.3182 32.7914 53.3328 37.8542 53.3328C 42.8359 53.3328 43.4824 53.3045 45.4115 53.22L 45.507 53.2159C 47.3507 53.1282 48.3457 52.8214 49.0188 52.5584C 49.9114 52.2077 50.5405 51.7986 51.1991 51.1411C 51.8575 50.4835 52.2819 49.8406 52.6184 48.9639ZM 28.1237 37.8151C 28.1237 32.4526 32.4841 28.0983 37.8542 28.0983C 43.2244 28.0983 47.5848 32.4526 47.5848 37.8151C 47.5848 43.1776 43.2244 47.5319 37.8542 47.5319C 32.4841 47.5319 28.1237 43.1776 28.1237 37.8151ZM 31.5331 37.8151C 31.5331 41.3073 34.3717 44.1273 37.8542 44.1273C 41.3368 44.1273 44.1755 41.2927 44.1755 37.8151C 44.1755 34.3229 41.3514 31.5028 37.8542 31.5028C 34.3571 31.5028 31.5331 34.3375 31.5331 37.8151ZM 47.9652 29.9832C 49.2178 29.9832 50.2332 28.9692 50.2332 27.7184C 50.2332 26.4675 49.2178 25.4536 47.9652 25.4536C 46.7125 25.4536 45.6971 26.4675 45.6971 27.7184C 45.6971 28.9692 46.7125 29.9832 47.9652 29.9832Z"/> </defs> </svg> </a> As you can see all the SVGs are different, but when they are rendered they look like this: Identical SVGs rendering
You must change the id to a unique name and properly reference it into xlink:href <use xlink:href="#path1_fill" ... <path id="path1_fill" fill-rule=... <use xlink:href="#path2_fill" ... <path id="path2_fill" fill-rule=... https://jsfiddle.net/42qq7wLu/
Svg map not working if I save it .html
<svg xmlns="http:/www.w3.org/2000/svg" version="1.1" viewBox="0 0 462.22 473.42"> <g transform="translate(-140.31946,-267.08233)"> <clipPath id="img"> <path style="fill:#cccccc;fill-opacity:1;stroke:#ffffff;stroke-width:0.5;stroke-opacity:1" inkscape:connector-curvature="0" d="m 164.84,522.87 0.11,0.44 1.2,1.23 1.14,0.03 2.18,0.85 1.25,-0.2 1.87,-1.43 0.73,-0.13 1.15,0.06 0.44,0.49 1.07,0.01 0.72,-0.56 1.34,0.46 1.3,1.66 0.43,3.08 1.11,0.53 -0.73,2 0.31,0.44 0.75,-0.43 2.12,0.49 0.38,-0.41 0.08,-1.14 0.5,-0.65 1.15,0.02 0.95,-0.98 1.4,-0.6 0.35,0.14 1.03,-0.31 0.34,1.32 3.17,0.61 0.54,-0.61 1.37,-0.08 0.37,-0.9 1.36,-0.97 0.96,-0.04 1.82,-0.88 1.32,-1.82 1.02,-0.33 0.78,0.08 0.9,0.77 1.68,0.43 1.53,1.59 0.56,0.03 0.44,1.16 0.64,0.05 0.76,1.3 1.11,-0.38 1.98,1.3 1.06,-0.19 1.55,-1.16 1.19,0.19 1.42,1.41 0.07,0.65 -0.46,1.06 -0.88,0.44 -0.59,0.89 0.04,1.45 -0.39,1.05 0.55,0.92 1.27,-0.23 1.82,1.1 0.57,-0.14 0.86,0.29 1.19,-0.73 -0.03,-0.84 -0.59,0.44 -0.61,-0.27 -0.39,-1.27 1.54,0.16 -0.51,-1.37 0.76,-0.87 1.17,-0.57 1.82,0.38 1.75,-0.45 0.85,-0.57 1.24,0.37 1.64,-0.73 1.19,0.33 0.45,1.49 1.63,0.27 1.39,-0.51 1.06,0.18 1.41,-0.41 1.73,-0.02 1.05,-0.56 0,0 0.73,2.16 1.58,0.07 0.44,-0.1 1.09,-1.33 -0.15,-0.73 0.49,-0.29 0.74,0.15 -0.19,2.49 -0.71,0.41 -0.18,0.46 0.06,1.8 -1.56,1.65 0.06,0.37 0.66,0.5 -0.07,0.59 0.49,0.3 0.25,0.62 1.89,1.42 2.04,1.03 1.18,-0.31 0.43,0.37 1.39,-0.26 0.4,0.22 0.91,1.85 -0.28,1.03 0.23,0.58 1.65,1.36 1.06,0.05 0.7,0.38 0.2,0.61 -0.2,0.86 1.4,-0.2 1.31,1.42 0.63,0.13 0.23,0.32 0,0 -0.47,0.57 -3.32,1.69 0.56,0.84 -0.7,0.86 -0.38,1.77 0.31,0.39 0.92,0.27 0.53,0.76 -0.22,0.87 -1.27,0.38 -2.71,1.63 -1.54,-0.19 -0.74,0.36 -1.49,1.87 -0.19,1.09 -0.86,0.24 -1.16,1.08 0.38,0.88 -0.99,0.92 -0.77,1.43 0.42,0.85 -0.5,0.52 0.53,0.53 -2.59,1.57 0.2,0.81 -0.26,0.64 -0.78,-1.33 0.03,-0.43 -0.94,-1.14 -0.87,-0.41 0.04,-0.73 -1.18,0.25 -1.93,-0.31 -0.5,0.45 -1.03,-0.4 -0.58,0.8 -0.57,0.01 -1.58,2.17 0.61,0.66 0.7,0.2 -0.52,0.44 0.46,0.77 -0.67,0.72 0.49,1.81 -1.88,1.12 -1.39,2.33 -0.63,-0.35 -0.48,0.21 -0.6,-0.17 -1.12,0.77 -2.53,0.25 0.61,0.55 -0.73,1.44 1.02,0.58 0.17,0.39 -0.66,1.1 0.09,0.83 -0.46,1.72 0.28,0.89 -0.59,1.39 -1.88,-0.39 -1.41,0.55 -0.53,0.69 -0.9,0.02 -0.85,0.82 -0.78,1.72 0.7,0.56 0.75,0.14 0.32,0.69 0.66,0.1 0.03,0.62 0.37,0.22 -1.37,0.43 -0.94,1.87 -0.57,0.31 -0.76,-0.05 -1.26,0.77 0.05,0.83 -0.74,1.28 0.17,2.6 2.44,1.43 1.28,1.87 -0.14,1 -0.52,0.29 -0.05,0.93 0.73,0.39 0.15,0.8 -0.59,0.83 -1.21,0.43 -0.34,1.75 -0.34,0.37 1.65,1.48 0.96,2.58 -0.13,1.8 0.53,2.61 -0.44,0.39 -1.34,0.15 0,0 -1.29,-0.28 -0.52,0.23 -0.52,-0.34 0,0 -0.08,-1.97 -1.13,-1.56 -0.32,-1.52 -1.12,-0.56 -1.37,-1.84 -1.42,0.11 0.02,-0.67 -0.43,-0.55 0.01,-0.92 -0.32,-0.42 -1.16,0.17 -0.75,-0.56 -1.03,0.27 -0.45,-0.57 -1.5,-0.3 -0.42,-1.05 0.42,-0.86 -0.25,-0.53 0.34,-1.02 -1.99,-0.45 -0.67,-0.93 2.15,-3.09 -0.84,-1.21 -2.35,-1.52 -0.47,-0.75 0.53,-2.37 0.78,-1.57 -0.54,-1.26 -1.5,-0.86 -0.3,-0.95 0.13,-0.89 -0.72,-2.3 -0.47,-0.49 -0.41,-2.54 0.55,-1.53 0.04,-1.33 -1.68,-2.95 -0.75,-0.46 -0.34,0.14 -1.57,-1.25 -1.1,-3.81 -0.64,-0.95 -0.39,-1.37 -1.25,-1.38 0.17,-1.45 0.33,-0.38 -1.25,-0.25 -0.96,0.88 -0.79,0.04 -0.19,-0.13 0.15,-0.48 -0.9,-0.05 -0.17,-0.61 -0.72,-0.13 -0.24,-0.41 -1.57,0.3 -0.76,-0.46 -0.44,0.14 -0.05,-0.8 -0.75,-0.02 -0.07,-2.24 -0.61,-0.42 0.35,-0.18 0.42,-1.17 -1.05,-1.57 0.02,-1.71 -0.98,-0.79 1.02,-0.29 0.27,-0.39 1.05,0.79 0.31,-0.17 -0.51,-2.42 0.17,-1.41 -1.09,-0.68 -0.31,0.19 0.12,-0.61 -0.37,-0.1 -1.05,-1.29 -0.33,-0.01 -0.89,0.77 -0.32,-0.2 -0.12,-0.68 -1.05,-0.23 -0.71,0.22 -1.07,-0.99 -1.05,-1.97 -0.82,-0.77 -0.06,-0.75 -0.4,-0.51 0.95,-1.39 -0.04,-0.41 -1.32,-1.54 -0.48,-1.11 -0.07,-1.3 -1.17,-0.38 -2.3,0.23 -0.78,0.52 -0.99,-0.5 -2.61,0.38 -0.81,-1.16 -1.1,-0.45 -0.17,-0.69 -1.63,-0.17 0,0 -0.43,0 -1.11,-0.91 -1.84,-0.11 -0.21,-1.41 -0.86,-0.58 0,0 -0.48,-1.34 -0.42,-2.96 1.07,-1.26 0.33,-0.8 -1.27,-2.99 0.05,-0.64 0.37,-0.32 -0.27,-0.9 0.07,-1.68 2.07,-1.9 0.35,-0.14 0.42,0.48 0.2,-0.62 -0.5,-0.67 -0.68,0.06 -0.66,-0.53 0.04,-1.21 1.22,-0.95 0.6,-0.85 1.28,-0.45 0.44,0.86 0.87,0.61 2.25,0.71 z" class="land" title="Alba" id="RO-AB" /> <image xlink:href="ana.jpg" clip-path="url(#img)" x="0" y="0" height="50px" width="50px"/> </clipPath> </g> </svg> Why is this code now working if i save it like a html document? Please help me . I am very new in svg so do not be rude with me :)