Related
So basically, im trying to make a wave transition between background colours and I put in this svg and it works fine but when I resize to big/full screen screens (desktop) the svg element doesn't stretch to the full width possible , my code:
<div class="waves" style="height: 244px;width: 100%;overflow-x: hidden;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" style="display:block;height:100%;">
<path fill="#36393D" fill-opacity="1" d="M0,192L18.5,202.7C36.9,213,74,235,111,202.7C147.7,171,185,85,222,74.7C258.5,64,295,128,332,176C369.2,224,406,256,443,234.7C480,213,517,139,554,128C590.8,117,628,171,665,181.3C701.5,192,738,160,775,128C812.3,96,849,64,886,85.3C923.1,107,960,181,997,186.7C1033.8,192,1071,128,1108,85.3C1144.6,43,1182,21,1218,64C1255.4,107,1292,213,1329,250.7C1366.2,288,1403,256,1422,240L1440,224L1440,320L1421.5,320C1403.1,320,1366,320,1329,320C1292.3,320,1255,320,1218,320C1181.5,320,1145,320,1108,320C1070.8,320,1034,320,997,320C960,320,923,320,886,320C849.2,320,812,320,775,320C738.5,320,702,320,665,320C627.7,320,591,320,554,320C516.9,320,480,320,443,320C406.2,320,369,320,332,320C295.4,320,258,320,222,320C184.6,320,148,320,111,320C73.8,320,37,320,18,320L0,320Z"
style="height:100%;width:100%;display:block;"></path>
</svg>
</div>
If I set the width to 100% on the svg element it just centers the path image
How about this. I've
Added a width:100% to the SVG element's stle.
Added preserveAspectRatio="none" so the SVG adapts to the viewport.
<div class="waves" style="height: 244px;width: 100%;overflow-x: hidden;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none" style="display:block;height:100%;width:100%;">
<path fill="#36393D" fill-opacity="1" d="M0,192L18.5,202.7C36.9,213,74,235,111,202.7C147.7,171,185,85,222,74.7C258.5,64,295,128,332,176C369.2,224,406,256,443,234.7C480,213,517,139,554,128C590.8,117,628,171,665,181.3C701.5,192,738,160,775,128C812.3,96,849,64,886,85.3C923.1,107,960,181,997,186.7C1033.8,192,1071,128,1108,85.3C1144.6,43,1182,21,1218,64C1255.4,107,1292,213,1329,250.7C1366.2,288,1403,256,1422,240L1440,224L1440,320L1421.5,320C1403.1,320,1366,320,1329,320C1292.3,320,1255,320,1218,320C1181.5,320,1145,320,1108,320C1070.8,320,1034,320,997,320C960,320,923,320,886,320C849.2,320,812,320,775,320C738.5,320,702,320,665,320C627.7,320,591,320,554,320C516.9,320,480,320,443,320C406.2,320,369,320,332,320C295.4,320,258,320,222,320C184.6,320,148,320,111,320C73.8,320,37,320,18,320L0,320Z"></path>
</svg>
</div>
Is that what you need?
<div class="waves" style="height: 244px;overflow: hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#36393D" fill-opacity="1" d="M0,192L18.5,202.7C36.9,213,74,235,111,202.7C147.7,171,185,85,222,74.7C258.5,64,295,128,332,176C369.2,224,406,256,443,234.7C480,213,517,139,554,128C590.8,117,628,171,665,181.3C701.5,192,738,160,775,128C812.3,96,849,64,886,85.3C923.1,107,960,181,997,186.7C1033.8,192,1071,128,1108,85.3C1144.6,43,1182,21,1218,64C1255.4,107,1292,213,1329,250.7C1366.2,288,1403,256,1422,240L1440,224L1440,320L1421.5,320C1403.1,320,1366,320,1329,320C1292.3,320,1255,320,1218,320C1181.5,320,1145,320,1108,320C1070.8,320,1034,320,997,320C960,320,923,320,886,320C849.2,320,812,320,775,320C738.5,320,702,320,665,320C627.7,320,591,320,554,320C516.9,320,480,320,443,320C406.2,320,369,320,332,320C295.4,320,258,320,222,320C184.6,320,148,320,111,320C73.8,320,37,320,18,320L0,320Z"
></path>
</svg>
</div>
How do I fill the other part of this svg with a different color so it blends in with my design? I want to fill the white part with the same grey that is above the curved svg, is that possible and how would I be able to achieve this?
Here is the svg:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 160 1440 100"><path fill="#F43C58" fill-opacity="1" d="M0,160L80,181.3C160,203,320,245,480,240C640,235,800,181,960,165.3C1120,149,1280,171,1360,181.3L1440,192L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z" data-darkreader-inline-fill="" style="--darkreader-inline-fill:#F43C58;"></path></svg>
Here:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 160 1440 100" viewport-fill="blue" style='stroke-width: 0px; background-color: blue;'><path fill="#F43C58" fill-opacity="1" d="M0,160L80,181.3C160,203,320,245,480,240C640,235,800,181,960,165.3C1120,149,1280,171,1360,181.3L1440,192L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z" data-darkreader-inline-fill="" style="--darkreader-inline-fill:#F43C58;" ></path></svg>
to fill background with a blue color.
You can give the SVG a background color:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 160 1440 100" style="background: #ecf0f3;"><path fill="#F43C58" fill-opacity="1" d="M0,160L80,181.3C160,203,320,245,480,240C640,235,800,181,960,165.3C1120,149,1280,171,1360,181.3L1440,192L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z" data-darkreader-inline-fill="" style="--darkreader-inline-fill:#F43C58;background: #000;"></path></svg>
I'm drawing a svg in html, when i draw this i get that line
and i dont want it, how i can sove it, this is my code
html
<svg style="background-color: #fff" version="1.1" xmlns="http://www.w3.org/2000/svg" height="100" width="100%" viewBox="0 0 100 20" preserveAspectRatio="none">
<path fill="#f2f2f2" d="M0 30 V12 Q30 17 55 5 T100 11 V30z" />
</svg>
after the line is another dive, its like a space between svg and another div
That line isn't part of your SVG shape- the height of your shape is 30px but your viewbox is only 20px high - you just need to change viewBox="0 0 100 20" to viewBox="0 0 100 30" so that the whole shape is in your viewport.
I opened it up in illustrator and that line is actually the edge of the artboard. I resized the art board and re-exported the code. I hope this helps. Unfortunately it did cram in some extra info.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1440 150" style="enable-background:new 0 0 1440 150;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
.st1{fill:#F2F2F2;}
</style>
<path class="st0" d="z"/>
<path class="st1" d="M0,150V60c288,16.7,552,5,792-35s456-30,648,30v95H0z"/>
<path class="st0" d="z"/>
</svg>
I have an svg of an eye, and am using it as an icon.
This svg has a <switch> element inside that contains all the path drawing stuff. When you inspect this <switch> element in the javascript console it shows its dimensions as 700px X 500px. The SVG containing it, however is 707px X 707px.
I.e. The SVG has a load of blank space at the top.
I would like to know how to make the SVG the same size as the element contained in it. I need to do this because I want to add a bootstrap tooltip to the image, but the tooltip gets placed much too high above the image because it is padded with all this white space!
I'm new to this SVG stuff - I tried changing the size of the viewport on the SVG, but that just cut the bottom off the image, and left the blank space at the top.
Here is the code for the SVG image:
<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<switch>
<foreignobject requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/" x="0" y="0" width="1" height="1"></foreignobject>
<g i:extraneous="self">
<g>
<path d="M98.066,57.193c-0.177-0.209-3.629-4.26-9.421-9.081l9.468-11.834l-4.226-3.381l-9.502,11.878 c-0.088-0.065-0.172-0.13-0.261-0.195c-4.013-2.935-8.08-5.37-12.147-7.306l7.502-15.005l-4.841-2.42L66.99,35.146 c-3.896-1.456-7.768-2.423-11.569-2.904l-4.959-17.064l-5.196,1.51l4.418,15.202c-5.41,0.042-11.018,1.142-16.674,3.256 l-7.648-15.297l-4.841,2.42l7.502,15.005c-4.067,1.936-8.134,4.371-12.147,7.306c-0.089,0.065-0.172,0.13-0.261,0.195 L6.113,32.897l-4.226,3.381l9.468,11.834c-5.792,4.82-9.244,8.872-9.421,9.081L0.456,58.94l1.478,1.747 c0.219,0.259,5.455,6.406,13.942,12.613C27.234,81.608,39.034,86,50,86s22.766-4.392,34.124-12.699 c8.487-6.207,13.723-12.354,13.942-12.613l1.478-1.747L98.066,57.193z M71.647,58.94c0,11.514-9.036,20.954-20.388,21.608 c-0.419,0.014-0.837,0.039-1.259,0.039s-0.84-0.025-1.259-0.039C37.389,79.894,28.353,70.454,28.353,58.94 c0-11.936,9.711-21.646,21.647-21.646c0.422,0,0.84,0.025,1.259,0.04C62.611,37.988,71.647,47.427,71.647,58.94z M7.666,58.941 c3.102-3.247,10.491-10.35,20.2-15.537c-3.098,4.401-4.925,9.757-4.925,15.536c0,5.773,1.823,11.126,4.916,15.524 c-3.277-1.745-6.214-3.656-8.681-5.455C13.808,65.097,9.762,61.139,7.666,58.941z M80.824,69.01 c-2.467,1.798-5.404,3.71-8.681,5.455c3.093-4.398,4.916-9.751,4.916-15.524c0-5.773-1.823-11.125-4.916-15.523 c3.277,1.745,6.214,3.656,8.681,5.454c5.37,3.914,9.415,7.872,11.511,10.069C90.24,61.138,86.193,65.096,80.824,69.01z"></path>
<path d="M39.179,58.94c0,5.98,4.845,10.825,10.818,10.825c5.98,0,10.825-4.845,10.825-10.825c0-5.98-4.845-10.825-10.825-10.825 C44.024,48.114,39.179,52.96,39.179,58.94z M45.941,61.646c-2.239,0-4.056-1.817-4.056-4.055c0-2.246,1.817-4.063,4.056-4.063 c2.239,0,4.056,1.817,4.056,4.063C49.997,59.829,48.18,61.646,45.941,61.646z"></path>
</g>
</g>
</switch>
</svg>
I've included it here in a PLNKR so you can see what is happening:
http://plnkr.co/edit/gw1k0vQGon3dxUOVvuDB
Here is the current look of the picture, with new colours for clarity:
Here is how I would like the image to look (again - ignore the poxy colours...):
I want to strip all the blank space from the top and the bottom.
Any ideas?
Like so? I've added a rect background so it's easy to see the extent of the SVG. All I've done is modify the viewBox so that values match the shape extents.
<svg viewBox="0 14 100 73" width="100" height="71" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" enable-background="new 0 0 100 100" xml:space="preserve" overflow="hidden">
<rect width="100" height="100" fill="lightblue"/>
<switch>
<foreignObject requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/" x="0" y="0" width="1" height="1"></foreignobject>
<g i:extraneous="self">
<g>
<path d="M98.066,57.193c-0.177-0.209-3.629-4.26-9.421-9.081l9.468-11.834l-4.226-3.381l-9.502,11.878 c-0.088-0.065-0.172-0.13-0.261-0.195c-4.013-2.935-8.08-5.37-12.147-7.306l7.502-15.005l-4.841-2.42L66.99,35.146 c-3.896-1.456-7.768-2.423-11.569-2.904l-4.959-17.064l-5.196,1.51l4.418,15.202c-5.41,0.042-11.018,1.142-16.674,3.256 l-7.648-15.297l-4.841,2.42l7.502,15.005c-4.067,1.936-8.134,4.371-12.147,7.306c-0.089,0.065-0.172,0.13-0.261,0.195 L6.113,32.897l-4.226,3.381l9.468,11.834c-5.792,4.82-9.244,8.872-9.421,9.081L0.456,58.94l1.478,1.747 c0.219,0.259,5.455,6.406,13.942,12.613C27.234,81.608,39.034,86,50,86s22.766-4.392,34.124-12.699 c8.487-6.207,13.723-12.354,13.942-12.613l1.478-1.747L98.066,57.193z M71.647,58.94c0,11.514-9.036,20.954-20.388,21.608 c-0.419,0.014-0.837,0.039-1.259,0.039s-0.84-0.025-1.259-0.039C37.389,79.894,28.353,70.454,28.353,58.94 c0-11.936,9.711-21.646,21.647-21.646c0.422,0,0.84,0.025,1.259,0.04C62.611,37.988,71.647,47.427,71.647,58.94z M7.666,58.941 c3.102-3.247,10.491-10.35,20.2-15.537c-3.098,4.401-4.925,9.757-4.925,15.536c0,5.773,1.823,11.126,4.916,15.524 c-3.277-1.745-6.214-3.656-8.681-5.455C13.808,65.097,9.762,61.139,7.666,58.941z M80.824,69.01 c-2.467,1.798-5.404,3.71-8.681,5.455c3.093-4.398,4.916-9.751,4.916-15.524c0-5.773-1.823-11.125-4.916-15.523 c3.277,1.745,6.214,3.656,8.681,5.454c5.37,3.914,9.415,7.872,11.511,10.069C90.24,61.138,86.193,65.096,80.824,69.01z"></path>
<path d="M39.179,58.94c0,5.98,4.845,10.825,10.818,10.825c5.98,0,10.825-4.845,10.825-10.825c0-5.98-4.845-10.825-10.825-10.825 C44.024,48.114,39.179,52.96,39.179,58.94z M45.941,61.646c-2.239,0-4.056-1.817-4.056-4.055c0-2.246,1.817-4.063,4.056-4.063 c2.239,0,4.056,1.817,4.056,4.063C49.997,59.829,48.18,61.646,45.941,61.646z"></path>
</g>
</g>
</switch>
</svg>
I've tried to make the SVG viewport take up 100% of the width and height of the page here:
http://jsfiddle.net/XZ57u/2/
However it seems to appear only when I change this:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" id="city">
To this (viewport size):
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1400 1400" enable-background="new 0 0 1400 1400" xml:space="preserve" id="city">
My understanding was that the 100 meant it was taking up the whole viewport percentage so why then does it appear off the page?
viewBox="0 0 100 100"
Simply put viewbox defines the coordinate-system limits of your SVG...it has nothing (really) to do with the dimensions of the element in the HTML which you can either set in the SVG itself or in your CSS.
By changing the viewbox you are effectively saying, I only want to see the top left 100x100 section of my 1400x1400 SVg.
EDIT: JSfiddle demo
with original 1400 viewbox and any CSS dimensions.
The viewbox numbers stand for pixels, not for percentatge. If you want to cover the whole container you have to set the SVG elements width and height to 100%
use this instead:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="100%" y="100%" xml:space="preserve" id="city">
here is the fiddle: http://jsfiddle.net/t5rhp/
you have to define the viewBox attribute as well. In addition you could also use Preserving Aspect Ratio as well.
svg {
width:100%;
height:100%;
}
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid none">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>