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'm trying to make the top edge of a website footer wavvy by using a svg.
My svg:
<svg id="footer_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1335 190.97">
<path class="cls-2" d="M924.04,146.21c-76.43,5.57-72.82,6.94-181.21,15.68-101.37,8.17-186.53,15.03-294.66,19.39-127.28,5.13-225.98,4.36-297.61,3.71-44.28-.4-94.82-1.28-150.55-3v10.98H1335v-63.26c-40.08,.65-76.99,1.52-110.4,2.47-84.89,2.41-179.64,5.22-300.56,14.03Z"></path>
</svg>
For some reason, the svg ends up with height=272.22px but the path height=90.17px.
I can't see any css settings that interferes with anything here.
Here's the result I'm getting:
I want to get rid of this extra white space:
.
Can anyone advise please?
NB: I'm not very experienced and have rarely used svgs before so it's very possible I've left something out or I've overlooked something. I've already tried looking this up but couldn't come up with a solution. All I can find is in relation to making the path the same height as the svg element but I want to achieve the opposite.
Many thanks!
The width and en height of the viewbox should match the size of the elements in the SVG. Your path has a height of 63.26, so here I moved up the path shape and made the height of the viewbox 63.26.
<svg id="footer_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1335 63.26">
<path class="cls-2" d="M 924.04 16.5 c -76.43 5.57 -72.82 6.94 -181.21 15.68 c -101.37 8.17 -186.53 15.03 -294.66 19.39 c -127.28 5.13 -225.98 4.36 -297.61 3.71 c -44.28 -0.4 -94.82 -1.28 -150.55 -3 v 10.98 H 1335 v -63.26 c -40.08 0.65 -76.99 1.52 -110.4 2.47 c -84.89 2.41 -179.64 5.22 -300.56 14.03 Z"></path>
</svg>
Use preserveAspectRatio="none":
svg {
width: 500px;
height: 50px;
}
<svg viewBox='0 0 100 100' preserveAspectRatio="none">
<path d="M 0,80 C 50,120 50,-50 100,20 V 100 H 0 Z" fill='lightblue' />
</svg>
I need to create some alphabets (AEGLNRUTSZ) using svg path.
Q. Is there any tool or technique available? I spent all day, playing with code but it seems very complex and don't make any sense. :(
Here's the example snippet, it draws letter D
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M28.2371517,0.75 C32.7510836,1.7 36.0111455,3.55 39.371517,7.05 C42.4309598,10.25 44.3368421,13.9 45.1393189,18 C45.7913313,21.45 45.7913313,58.55 45.1393189,62.05 C43.4340557,71.15 35.6600619,78.25 26.0303406,79.5 C24.0241486,79.75 17.3034056,80 11.1845201,80 L-7.10542736e-15,80 L-7.10542736e-15,1.42108547e-14 L12.4383901,1.42108547e-14 C21.2656347,1.42108547e-14 25.7795666,0.2 28.2371517,0.75 Z M14.5448916,40 L14.5448916,65.6 L19.7108359,65.4 C24.174613,65.25 25.1275542,65.05 27.1337461,63.9 C31.0458204,61.6 31.0959752,61.45 31.0959752,39.7 C31.0959752,18.5 31.0959752,18.5 27.4346749,16.1 C25.6291022,14.9 24.8767802,14.75 19.9616099,14.55 L14.5448916,14.4 L14.5448916,40 Z" fill="
I created this simple inline SVG by saving as "Optimized SVG" in inkscape. Prior to saving I set the size to 200X200px.
<div style="width: 200px; background-color: red;">
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<g>
<path class="fs-logo-fill" d="m71.679 40.782v52.917h52.917v-52.917zm26.458 7.2166a19.242 19.242 0 0 1 19.242 19.242 19.242 19.242 0 0 1-19.242 19.242 19.242 19.242 0 0 1-19.242-19.242 19.242 19.242 0 0 1 19.242-19.242z"/>
</g>
</svg>
I then put it inside a the div element seen that has a width of 200px.
This is the codepen:
https://codepen.io/oleersoy/pen/dLxvEJ
As can be seen the red div is a lot larger than the inline svg rendering. How do we set the viewbox parameters so that the inline SVG will always fit the size of the containing element?
In order to get the viewBox right you need to get the size of the bounding box of the path, and use the values you get to define the viewBox.
console.log(thePath.getBBox())
<div style="width: 200px; background-color: red;">
<svg viewBox="71.68 40.782 52.92 52.92" style="display:block;">
<g>
<path id="thePath" class="fs-logo-fill" d="m71.679 40.782v52.917h52.917v-52.917zm26.458 7.2166a19.242 19.242 0 0 1 19.242 19.242 19.242 19.242 0 0 1-19.242 19.242 19.242 19.242 0 0 1-19.242-19.242 19.242 19.242 0 0 1 19.242-19.242z"/>
</g>
</svg>
</div>
In this case the bounding box of the path is:
let BB = {
"x": 71.67900085449219,
"y": 40.78200149536133,
"width": 52.91699981689453,
"height": 52.9170036315918
}
The viewBox will have this aspect:
viewBox=`${BB.x} ${BB.y} ${BB.width} ${BB.height}`
So we investigated this here to and per #Wolff hint as long as we set the canvas size to the same size as the drawing, then viewbox takes care of itself. In other words it has the right parameters to fit inside a div responsively and we are done. Here's a codepen:
https://codepen.io/oleersoy/pen/xevpOw
Note that we are setting the color of the SVG using the css class fs-logo-fill.
I have an automatically generated SVG spritemap (grunt-svg-sprite) which looks like this file:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116" height="69" viewBox="0 0 116 69">
<svg width="116" height="25" viewBox="0 0 116 25" id="block1" y="0">
<path fill="#fff" stroke="#FF51D4" stroke-miterlimit="10" d="M0 0h116v25H0z"/>
<path fill="#D5FF54" stroke="#FF51D4" stroke-miterlimit="10" d="M0 0h116v25H0z"/>
</svg>
<svg width="20" height="20" viewBox="0 0 20 20" id="block2" y="25">
<path fill="#FF001A" d="M.5.5h19v19H.5z"/>
<path fill="#1D1D1B" d="M19 1v18H1V1h18m1-1H0v20h20V0z"/>
</svg>
<svg width="27" height="24" viewBox="0 0 27 24" id="block3" y="45">
<path d="M.5.5h26v23H.5z"/>
<path fill="#6BFF4E" d="M26 1v22H1V1h25m1-1H0v24h27V0z"/>
</svg>
</svg>
This SVG consists of three "images" which have the IDs "block1", "block2" and "block3".
I want to display only "block1" on my web page, so that the dimensions of this image should be scalable. I want to set the width to 10rem and the height should be automatically adjusted. I did it this way:
<img src="https://cdn.mediacru.sh/ahw4Jhv0r6GG.svg#block1" style="width:10rem;"/>
And here I created a JSFiddle. The problem is, that the web browser displays all three blocks instead of only "block1". How can I do this with an <img>? I have to support the latest versions of web browsers and only IE11, previous versions would be great, but is not a must.
(I can not use the object HTML tag, because I am limited in my IE11 support - I can not see the objects on this page, I see the images of "iframe", "img" and "CSS background" but "object": three times: "Active content removed").
The easiest way to solve your problem is to add some CSS directly to your SVG file:
<style><![CDATA[ svg svg { display: none; } svg svg:target { display: inline; }]]></style>
This simple CSS prevents all the blocks from display and shows only the one you're targeting to.
Here is your SVG file with added CSS and JSFiddle demo.
While you use Grunt you can automatize it using e.g. grunt-string-replace task (running it on SVG file after processing with grunt-svg-sprite). The task should look more or less like this:
'string-replace': {
dist: {
files: {
'./src/preprocessedSVG.svg': './build/sprite.svg'
},
options: {
replacements: [{
pattern: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116" height="69" viewBox="0 0 116 69">',
replacement: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116" height="69" viewBox="0 0 116 69"><style><![CDATA[ svg svg { display: none; } svg svg:target { display: inline; }]]></style>'
}]
}
}
You can add some variables or RegExps to pattern to make it more robust and bulletproof.
--
The other solution is to switch to inline SVG nicely described by Chris Coyer (http:// css-tricks.com/svg-sprites-use-better-icon-fonts/). There is also Grunt task for that - [grunt-svgstore] (https:// github.com/FWeinb/grunt-svgstore).
P.S. You need to copy those links and remove space after "https://" cause I am new to StackOverflow and can not post more than 2 links...