I want this svg to be 69px width and height. But it's not scaling or I don't understand viewbox.
picture is here
I understand that width and height applies to rect, path etc and viewbox is the canvas in which the svg is inside.
AS you can see from the code snippet below. The svg is 69px, but the logo inside sticks to the top left corner, but I want it to be as wide an tall as possible: 69px
<svg width="69" height="69" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4415 6.28449C10.4415 7.10822 10.4463 7.93207 10.4381 8.75576C10.4361 8.95977 10.5112 9.03203 10.713 9.02471C11.0684 9.01173 11.4277 9.0434 11.7797 9.00514C12.7047 8.90464 13.4368 8.49129 13.8053 7.60841C14.1704 6.73343 14.1651 5.83436 13.8403 4.94898C13.5425 4.1373 12.8973 3.74903 12.0656 3.6199C11.6197 3.55068 11.1704 3.58806 10.7227 3.58223C10.4551 3.57876 10.4422 3.59445 10.4418 3.85541C10.4407 4.6651 10.4414 5.47479 10.4415 6.28449ZM5.98329 6.20077C5.98329 4.89727 5.98184 3.59381 5.98462 2.29031C5.98513 2.06529 6.00176 1.84022 6.01377 1.61529C6.05083 0.922079 6.61303 0.369839 7.27299 0.263374C7.46967 0.23162 7.66715 0.213693 7.86776 0.214073C9.54884 0.216906 11.2301 0.20215 12.911 0.219655C14.2466 0.233565 15.4895 0.594481 16.5741 1.3772C17.6351 2.14283 18.2553 3.20655 18.4851 4.47521C18.7648 6.01934 18.7748 7.55987 18.2195 9.0582C17.6923 10.4806 16.6843 11.4255 15.2541 11.9599C14.3371 12.3026 13.3866 12.3915 12.4238 12.4004C10.9636 12.4138 9.50323 12.408 8.04298 12.4028C7.47219 12.4007 6.95239 12.2657 6.52485 11.8465C6.11906 11.4488 5.97962 10.9621 5.97598 10.4283C5.96645 9.01918 5.97274 7.60993 5.97274 6.20077H5.98329Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.62759 7.66138C4.57612 8.67961 4.61447 9.66663 4.57702 10.6511C4.53697 11.7049 3.84084 12.5047 2.67921 12.5854C2.10363 12.6254 1.54002 12.6071 1.01745 12.3268C0.417807 12.005 0.115548 11.4857 0.0332615 10.8337C-0.0233346 10.3855 0.0103495 9.93313 0.00808393 9.48266C0.00295437 8.47551 0.00739998 7.46837 2.34042e-05 6.46122C-0.00136301 6.26698 0.0585673 6.15704 0.254303 6.0836C1.23221 5.71668 2.20494 5.33615 3.17828 4.9573C3.56209 4.80792 3.94194 4.64865 4.32499 4.49732C4.60865 4.38519 4.62703 4.39787 4.62729 4.69385C4.62806 5.69398 4.62759 6.69406 4.62759 7.66138Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.0324214 3.16745C0.0566586 2.70299 -0.0246875 2.12373 0.113853 1.55369C0.343614 0.608484 1.10364 0.0115526 2.08552 0.000855396C2.5353 -0.00404927 2.97858 0.00707082 3.40737 0.172054C4.10045 0.438639 4.6214 1.16368 4.63196 1.90255C4.63538 2.14191 4.61777 2.38254 4.63705 2.62041C4.6553 2.84581 4.56994 2.95562 4.35638 3.03722C3.11665 3.51082 1.88252 3.99879 0.646386 4.4816C0.50092 4.53843 0.352762 4.58887 0.209434 4.65044C0.0699954 4.71035 0.0308826 4.65496 0.0316092 4.52393C0.0338321 4.10851 0.0324214 3.6931 0.0324214 3.16745Z" fill="black"/>
</svg>
My suggestion is to use an external editor (like https://jakearchibald.github.io/svgomg/), as there would be too many changes to be made within path and d.
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 69 69" style="enable-background:new 0 0 69 69;width: 69px;height: 69px;" xml:space="preserve">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;}
</style>
<path class="st0" d="M38.6,34.4c0,3,0,6.1,0,9.1c0,0.8,0.3,1,1,1c1.3,0,2.6,0.1,3.9-0.1c3.4-0.4,6.1-1.9,7.5-5.2
c1.3-3.2,1.3-6.6,0.1-9.8c-1.1-3-3.5-4.4-6.6-4.9c-1.6-0.3-3.3-0.1-5-0.1c-1,0-1,0-1,1C38.6,28.5,38.6,31.4,38.6,34.4z M22.1,34.1
c0-4.8,0-9.6,0-14.4c0-0.8,0.1-1.7,0.1-2.5c0.1-2.6,2.2-4.6,4.7-5c0.7-0.1,1.5-0.2,2.2-0.2c6.2,0,12.4,0,18.6,0
c4.9,0.1,9.5,1.4,13.5,4.3c3.9,2.8,6.2,6.8,7.1,11.4c1,5.7,1.1,11.4-1,16.9c-1.9,5.3-5.7,8.7-11,10.7C53,56.7,49.5,57,45.9,57
c-5.4,0-10.8,0-16.2,0c-2.1,0-4-0.5-5.6-2.1c-1.5-1.5-2-3.3-2-5.2C22,44.5,22.1,39.3,22.1,34.1L22.1,34.1z"/>
<path class="st0" d="M17.1,39.5c-0.2,3.8,0,7.4-0.2,11c-0.1,3.9-2.7,6.8-7,7.1c-2.1,0.1-4.2,0.1-6.1-1c-2.2-1.2-3.3-3.1-3.6-5.5
c-0.2-1.7-0.1-3.3-0.1-5c0-3.7,0-7.4,0-11.2c0-0.7,0.2-1.1,0.9-1.4c3.6-1.4,7.2-2.8,10.8-4.2c1.4-0.6,2.8-1.1,4.2-1.7
c1-0.4,1.1-0.4,1.1,0.7C17.1,32.3,17.1,36,17.1,39.5z"/>
<path class="st0" d="M0.1,22.9c0.1-1.7-0.2-3.9,0.3-6c0.8-3.5,3.7-5.7,7.3-5.7c1.7,0,3.3,0,4.9,0.6c2.6,1,4.5,3.7,4.5,6.4
c0,0.9-0.1,1.8,0,2.7c0.1,0.8-0.2,1.2-1,1.5C11.5,24.2,7,26,2.4,27.8c-0.5,0.2-1.1,0.4-1.6,0.6c-0.5,0.2-0.7,0-0.7-0.5
C0.1,26.4,0.1,24.9,0.1,22.9z"/>
</svg>
Basically the changes to width and height (to 68px) only apply to the canvas but the content is inside path so you should, point by point, move the image.
It is doable but it is hard work, I prefer to help myself with external editors.
i was having issues with svg scaling also recently. What i found helpful was this post by css-tricks. I will attach the link here: https://css-tricks.com/scale-svg/
i hope this brings more clarity to your issue :)
edit: playing around with the svg you provided i changed the aspect ratio and viewbox to fit in the svg (making it 'scale' to the wanted width, with reduced height in order to preserve its aspect ratio without distorting or cutting the svg).
here is what i changed:
<svg width="69" height="49" viewBox="0 -2 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
I have a silhouette I'm trying to use in a basic phone app.
Currently it is very small on screen, i want to increase it to take up more of the screen. However, when I change the dimension, it goes to being cut out on mobile, and in the bottom right hand corner.
This is the original SVG which works,
function Silhoute({ success }) {
return (
<svg
version="1.1"
id="Capa_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 206.326 206.326"
style={{ enableBackground: "new 0 0 206.326 206.326" }}
xmlSpace="preserve"
fill={success ? "#10B981" : "white"}
className="h-full w-full opacity-50"
>
<g>
<g>
<path
d="M104.265,117.959c-0.304,3.58,2.126,22.529,3.38,29.959c0.597,3.52,2.234,9.255,1.645,12.3
c-0.841,4.244-1.084,9.736-0.621,12.934c0.292,1.942,1.211,10.899-0.104,14.175c-0.688,1.718-1.949,10.522-1.949,10.522
c-3.285,8.294-1.431,7.886-1.431,7.886c1.017,1.248,2.759,0.098,2.759,0.098c1.327,0.846,2.246-0.201,2.246-0.201
c1.139,0.943,2.467-0.116,2.467-0.116c1.431,0.743,2.758-0.627,2.758-0.627c0.822,0.414,1.023-0.109,1.023-0.109
c2.466-0.158-1.376-8.05-1.376-8.05c-0.92-7.088,0.913-11.033,0.913-11.033c6.004-17.805,6.309-22.53,3.909-29.24
c-0.676-1.937-0.847-2.704-0.536-3.545c0.719-1.941,0.195-9.748,1.072-12.848c1.692-5.979,3.361-21.142,4.231-28.217
c1.169-9.53-4.141-22.308-4.141-22.308c-1.163-5.2,0.542-23.727,0.542-23.727c2.381,3.705,2.29,10.245,2.29,10.245
c-0.378,6.859,5.541,17.342,5.541,17.342c2.844,4.332,3.921,8.442,3.921,8.747c0,1.248-0.273,4.269-0.273,4.269l0.109,2.631
c0.049,0.67,0.426,2.977,0.365,4.092c-0.444,6.862,0.646,5.571,0.646,5.571c0.92,0,1.931-5.522,1.931-5.522
c0,1.424-0.348,5.687,0.42,7.295c0.919,1.918,1.595-0.329,1.607-0.78c0.243-8.737,0.768-6.448,0.768-6.448
c0.511,7.088,1.139,8.689,2.265,8.135c0.853-0.407,0.073-8.506,0.073-8.506c1.461,4.811,2.569,5.577,2.569,5.577
c2.411,1.693,0.92-2.983,0.585-3.909c-1.784-4.92-1.839-6.625-1.839-6.625c2.229,4.421,3.909,4.257,3.909,4.257
c2.174-0.694-1.9-6.954-4.287-9.953c-1.218-1.528-2.789-3.574-3.245-4.789c-0.743-2.058-1.304-8.674-1.304-8.674
c-0.225-7.807-2.155-11.198-2.155-11.198c-3.3-5.282-3.921-15.135-3.921-15.135l-0.146-16.635
c-1.157-11.347-9.518-11.429-9.518-11.429c-8.451-1.258-9.627-3.988-9.627-3.988c-1.79-2.576-0.767-7.514-0.767-7.514
c1.485-1.208,2.058-4.415,2.058-4.415c2.466-1.891,2.345-4.658,1.206-4.628c-0.914,0.024-0.707-0.733-0.707-0.733
C115.068,0.636,104.01,0,104.01,0h-1.688c0,0-11.063,0.636-9.523,13.089c0,0,0.207,0.758-0.715,0.733
c-1.136-0.03-1.242,2.737,1.215,4.628c0,0,0.572,3.206,2.058,4.415c0,0,1.023,4.938-0.767,7.514c0,0-1.172,2.73-9.627,3.988
c0,0-8.375,0.082-9.514,11.429l-0.158,16.635c0,0-0.609,9.853-3.922,15.135c0,0-1.921,3.392-2.143,11.198
c0,0-0.563,6.616-1.303,8.674c-0.451,1.209-2.021,3.255-3.249,4.789c-2.408,2.993-6.455,9.24-4.29,9.953
c0,0,1.689,0.164,3.909-4.257c0,0-0.046,1.693-1.827,6.625c-0.35,0.914-1.839,5.59,0.573,3.909c0,0,1.117-0.767,2.569-5.577
c0,0-0.779,8.099,0.088,8.506c1.133,0.555,1.751-1.047,2.262-8.135c0,0,0.524-2.289,0.767,6.448
c0.012,0.451,0.673,2.698,1.596,0.78c0.779-1.608,0.429-5.864,0.429-7.295c0,0,0.999,5.522,1.933,5.522
c0,0,1.099,1.291,0.648-5.571c-0.073-1.121,0.32-3.422,0.369-4.092l0.106-2.631c0,0-0.274-3.014-0.274-4.269
c0-0.311,1.078-4.415,3.921-8.747c0,0,5.913-10.488,5.532-17.342c0,0-0.082-6.54,2.299-10.245c0,0,1.69,18.526,0.545,23.727
c0,0-5.319,12.778-4.146,22.308c0.864,7.094,2.53,22.237,4.226,28.217c0.886,3.094,0.362,10.899,1.072,12.848
c0.32,0.847,0.152,1.627-0.536,3.545c-2.387,6.71-2.083,11.436,3.921,29.24c0,0,1.848,3.945,0.914,11.033
c0,0-3.836,7.892-1.379,8.05c0,0,0.192,0.523,1.023,0.109c0,0,1.327,1.37,2.761,0.627c0,0,1.328,1.06,2.463,0.116
c0,0,0.91,1.047,2.237,0.201c0,0,1.742,1.175,2.777-0.098c0,0,1.839,0.408-1.435-7.886c0,0-1.254-8.793-1.945-10.522
c-1.318-3.275-0.387-12.251-0.106-14.175c0.453-3.216,0.21-8.695-0.618-12.934c-0.606-3.038,1.035-8.774,1.641-12.3
c1.245-7.423,3.685-26.373,3.38-29.959l1.008,0.354C103.809,118.312,104.265,117.959,104.265,117.959z"
/>
</g>
</g>
</svg>
)
}
On changing the viewbox, say to this
function Silhoute({ success }) {
return (
<svg
version="1.1"
id="Capa_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 103.163 103.163"
style={{ enableBackground: "new 0 0 103.163 103.163" }}
xmlSpace="preserve"
fill={success ? "#10B981" : "white"}
className="h-full w-full opacity-50"
>
<g>
<g>
<path
d="M104.265,117.959c-0.304,3.58,2.126,22.529,3.38,29.959c0.597,3.52,2.234,9.255,1.645,12.3
c-0.841,4.244-1.084,9.736-0.621,12.934c0.292,1.942,1.211,10.899-0.104,14.175c-0.688,1.718-1.949,10.522-1.949,10.522
c-3.285,8.294-1.431,7.886-1.431,7.886c1.017,1.248,2.759,0.098,2.759,0.098c1.327,0.846,2.246-0.201,2.246-0.201
c1.139,0.943,2.467-0.116,2.467-0.116c1.431,0.743,2.758-0.627,2.758-0.627c0.822,0.414,1.023-0.109,1.023-0.109
c2.466-0.158-1.376-8.05-1.376-8.05c-0.92-7.088,0.913-11.033,0.913-11.033c6.004-17.805,6.309-22.53,3.909-29.24
c-0.676-1.937-0.847-2.704-0.536-3.545c0.719-1.941,0.195-9.748,1.072-12.848c1.692-5.979,3.361-21.142,4.231-28.217
c1.169-9.53-4.141-22.308-4.141-22.308c-1.163-5.2,0.542-23.727,0.542-23.727c2.381,3.705,2.29,10.245,2.29,10.245
c-0.378,6.859,5.541,17.342,5.541,17.342c2.844,4.332,3.921,8.442,3.921,8.747c0,1.248-0.273,4.269-0.273,4.269l0.109,2.631
c0.049,0.67,0.426,2.977,0.365,4.092c-0.444,6.862,0.646,5.571,0.646,5.571c0.92,0,1.931-5.522,1.931-5.522
c0,1.424-0.348,5.687,0.42,7.295c0.919,1.918,1.595-0.329,1.607-0.78c0.243-8.737,0.768-6.448,0.768-6.448
c0.511,7.088,1.139,8.689,2.265,8.135c0.853-0.407,0.073-8.506,0.073-8.506c1.461,4.811,2.569,5.577,2.569,5.577
c2.411,1.693,0.92-2.983,0.585-3.909c-1.784-4.92-1.839-6.625-1.839-6.625c2.229,4.421,3.909,4.257,3.909,4.257
c2.174-0.694-1.9-6.954-4.287-9.953c-1.218-1.528-2.789-3.574-3.245-4.789c-0.743-2.058-1.304-8.674-1.304-8.674
c-0.225-7.807-2.155-11.198-2.155-11.198c-3.3-5.282-3.921-15.135-3.921-15.135l-0.146-16.635
c-1.157-11.347-9.518-11.429-9.518-11.429c-8.451-1.258-9.627-3.988-9.627-3.988c-1.79-2.576-0.767-7.514-0.767-7.514
c1.485-1.208,2.058-4.415,2.058-4.415c2.466-1.891,2.345-4.658,1.206-4.628c-0.914,0.024-0.707-0.733-0.707-0.733
C115.068,0.636,104.01,0,104.01,0h-1.688c0,0-11.063,0.636-9.523,13.089c0,0,0.207,0.758-0.715,0.733
c-1.136-0.03-1.242,2.737,1.215,4.628c0,0,0.572,3.206,2.058,4.415c0,0,1.023,4.938-0.767,7.514c0,0-1.172,2.73-9.627,3.988
c0,0-8.375,0.082-9.514,11.429l-0.158,16.635c0,0-0.609,9.853-3.922,15.135c0,0-1.921,3.392-2.143,11.198
c0,0-0.563,6.616-1.303,8.674c-0.451,1.209-2.021,3.255-3.249,4.789c-2.408,2.993-6.455,9.24-4.29,9.953
c0,0,1.689,0.164,3.909-4.257c0,0-0.046,1.693-1.827,6.625c-0.35,0.914-1.839,5.59,0.573,3.909c0,0,1.117-0.767,2.569-5.577
c0,0-0.779,8.099,0.088,8.506c1.133,0.555,1.751-1.047,2.262-8.135c0,0,0.524-2.289,0.767,6.448
c0.012,0.451,0.673,2.698,1.596,0.78c0.779-1.608,0.429-5.864,0.429-7.295c0,0,0.999,5.522,1.933,5.522
c0,0,1.099,1.291,0.648-5.571c-0.073-1.121,0.32-3.422,0.369-4.092l0.106-2.631c0,0-0.274-3.014-0.274-4.269
c0-0.311,1.078-4.415,3.921-8.747c0,0,5.913-10.488,5.532-17.342c0,0-0.082-6.54,2.299-10.245c0,0,1.69,18.526,0.545,23.727
c0,0-5.319,12.778-4.146,22.308c0.864,7.094,2.53,22.237,4.226,28.217c0.886,3.094,0.362,10.899,1.072,12.848
c0.32,0.847,0.152,1.627-0.536,3.545c-2.387,6.71-2.083,11.436,3.921,29.24c0,0,1.848,3.945,0.914,11.033
c0,0-3.836,7.892-1.379,8.05c0,0,0.192,0.523,1.023,0.109c0,0,1.327,1.37,2.761,0.627c0,0,1.328,1.06,2.463,0.116
c0,0,0.91,1.047,2.237,0.201c0,0,1.742,1.175,2.777-0.098c0,0,1.839,0.408-1.435-7.886c0,0-1.254-8.793-1.945-10.522
c-1.318-3.275-0.387-12.251-0.106-14.175c0.453-3.216,0.21-8.695-0.618-12.934c-0.606-3.038,1.035-8.774,1.641-12.3
c1.245-7.423,3.685-26.373,3.38-29.959l1.008,0.354C103.809,118.312,104.265,117.959,104.265,117.959z"
/>
</g>
</g>
</svg>
)
}
The size increases but it has set in a location off screen.
What am i doing wrong here?
You need to specify a width and an height to the svg itself.
You can do it directly inside the svg tag, or you can assign a class.
<svg width="60px" height="60px">
Make sure to match the last two parameters inside viewBox with your width and height. You can remove style="enable-background" as well.
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.
I'm including svg:s in my markup using xlink:href:
<svg class="questionTitleIcon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-questionmark"></use>
</svg>
#icon-questionmark is defined
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-questionmark" viewBox="0 0 60 61" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"><!-- Generator: Sketch 3.4.1 (15681) - http://www.bohemiancoding.com/sketch --><title>Slice 1</title><desc>Created with Sketch.</desc><defs></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g id="icon-invoicing-1" sketch:type="MSLayerGroup"><path d="M59.9827338,30.6427143 C59.9827338,14.2078571 46.5638849,0.884857143 30.0107914,0.884857143 C13.4581295,0.884857143 0.0392805755,14.2078571 0.0392805755,30.6427143 C0.0392805755,47.0775714 13.4581295,60.4005714 30.0107914,60.4005714 C46.5638849,60.4005714 59.9827338,47.0775714 59.9827338,30.6427143" id="Fill-1" fill="#FFBB2F" sketch:type="MSShapeGroup"></path><path d="M32.7333898,38.383 C33.4633898,39.1 33.8283898,40.003 33.8283898,41.091 C33.8283898,42.18 33.4633898,43.082 32.7333898,43.799 C32.0023898,44.516 31.0933898,44.874 30.0053898,44.874 C28.9163898,44.874 28.0203898,44.516 27.3173898,43.799 C26.6143898,43.082 26.2623898,42.18 26.2623898,41.091 C26.2623898,40.003 26.6143898,39.1 27.3173898,38.383 C28.0203898,37.667 28.9163898,37.308 30.0053898,37.308 C31.0933898,37.308 32.0023898,37.667 32.7333898,38.383 Z" id="Path" stroke="#6C4B00" stroke-width="2" sketch:type="MSShapeGroup"></path><path d="M22.0223898,23.022 C22.0223898,23.022 22.4993898,19.883 24.0523898,18.329 C25.6053898,16.777 27.7353898,16 30.4433898,16 C31.7433898,16 32.9053898,16.193 33.9273898,16.577 C34.9493898,16.963 35.8193898,17.507 36.5353898,18.21 C37.2523898,18.914 37.7963898,19.743 38.1683898,20.699 C38.5393898,21.654 38.7253898,22.69 38.7253898,23.805 C38.7253898,24.601 38.6393898,25.298 38.4663898,25.895 C38.2943898,26.492 38.0623898,27.037 37.7703898,27.528 C37.4773898,28.019 37.1463898,28.464 36.7743898,28.862 L36.4023898,29.26 C35.9503898,29.676 35.2333898,30.297 34.8093898,30.641 C34.8093898,30.641 34.8093898,30.641 34.4653898,30.932 C34.1193898,31.225 33.8083898,31.53 33.5293898,31.848 C33.2503898,32.167 33.1113901,32.3135647 32.8723898,32.884 C32.6333895,33.4544353 32.6333898,34.305 32.6333898,34.437 C32.6333898,34.568 31.7333898,34.675 30.6333898,34.675 L29.0583898,34.675 C27.9583898,34.675 27.0583898,34.326 27.0583898,33.899 C27.0583898,33.472 27.1773898,31.749 27.4173898,31.151 C27.6563898,30.554 27.9603898,30.017 28.3323898,29.539 C28.7043898,29.061 29.1153898,28.623 29.5673898,28.225 L30.0183898,27.826 C30.5143898,27.432 31.4163898,26.701 32.0223898,26.201 C32.0223898,26.201 32.0223898,26.201 32.4743898,25.736 C32.9253898,25.272 33.1513898,24.734 33.1513898,24.123 C33.1513898,23.433 32.9323898,22.836 32.4943898,22.331 C32.0553898,21.827 31.3323898,21.575 30.3233898,21.575 C29.3143898,21.575 28.5323898,21.867 27.9743898,22.451 C27.7887231,22.6456667 27.9743896,22.4510002 27.4173899,23.2842646 C26.8603902,24.1175289 26.2383898,24.999 25.1383898,24.999 L23.7223898,24.999 C22.6223898,24.999 21.8573898,24.109 22.0223898,23.022 Z" id="Path" stroke="#6C4B00" stroke-width="2" sketch:type="MSShapeGroup"></path></g></g></symbol>
</svg>
This works fine in Chrome.
In firefox, on any other url than "/", if I have a base-tag in my header, the items are not found, here is an example of the base-tag
Why is this and what can be done about it?
As Kaiido said, if you have to use a <base> element, then you will need to change all your xlink:href and url(#foo) references to absolute URLs. For example:
xlink:href="/path/to/my.svg#icon-questionmark"