I've almost finished my background but it's not working properly, I'm trying to get the image to fit the viewbox dimensions. I need my image to responsive and to act like background-size:cover. I also need to have the scrollbars gone and I don't know why its there. Can someone help me get my image to fit the entire viewbox area and be responsive - I need it to be 100% width and 100% height and the image covered
codepen
<svg viewBox="0 0 490 500" width="100%" height="100%">
<defs>
<pattern id="hexagons" width="100%" height="100%">
<g id="svg" fill="black" x="0" y="0"></g>
</pattern>
<mask id="hexagon-halftone-mask">
<rect x="0" y="0" width="100%" height="100%" fill="url(#hexagons)" />
</mask>
</defs>
<image id="svg-bg" xlink:href="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426_960_720.jpg" mask="url(#hexagon-halftone-mask)"/>
</svg>
Related
I'd like stretch an image into a SVG but it seems not working as expected.
I used the preserveAspectRatio for the SVG but it doesn't work and the image get a padding left and right.
My code :
<svg class="mapSvg" preserveAspectRatio="none" width="1292px" height="649px" viewBox="0 0 1292 649">
<image xlink:href="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/befbcde0-9b36-11e6-95b9-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg" height="100%" width="100%" x="0" y="0"></image>
<polyline fill="red" stroke="black" points="461.909521484375,221.9047607421875 471.43330078125,220.9523681640625 475.24287109375,212.38095703125 472.385693359375,167.61904296875 477.147607421875,153.3333251953125 462.8619140625,153.3333251953125 460.95712890625,219.047607421875 461.909521484375,221.9047607421875" data-id="0">
</svg>
Main issue : my image do not fill the SVG.
Move preserveAspectRatio="none" to the image tag.
<svg class="mapSvg" width="1292px" height="649px" viewBox="0 0 1292 649">
<image preserveAspectRatio="none" xlink:href="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/befbcde0-9b36-11e6-95b9-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg" height="100%" width="100%" x="0" y="0"></image>
<polyline fill="red" stroke="black" points="461.909521484375,221.9047607421875 471.43330078125,220.9523681640625 475.24287109375,212.38095703125 472.385693359375,167.61904296875 477.147607421875,153.3333251953125 462.8619140625,153.3333251953125 460.95712890625,219.047607421875 461.909521484375,221.9047607421875" data-id="0">
</svg>
I try to draw a svg in my HTML Code to have a specific path/object with an background image.
The object should be a little bit responsive (using bootstrap), but filled with the image and the image should preseve its ratio.
<svg width="100%" height="370px" viewBox="0 0 1148.942 598.47" preserveAspectRatio="none" >
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="1153" height="680">
<image xlink:href="images/headerBackground.png" x="0" y="0" width="1153" height="680" />
</pattern>
</defs>
<path fill="url(#img1)" d="M1145.237,3.395H3.379v592c0,0,247.108-160.416,1141-99L1145.237,3.395z"/>
</svg>
You can see it here in the live demo:
https://liveweave.com/N5nib6
https://jsfiddle.net/zyyvd86g/
Maybe anybody can help? I hope the problem is clear enough.
You can use max-width:100% for the svg element and div element wrap on this svg.
You can get the responsive image
div {
width: 80%;
height: auto;
margin: 0 auto;
}
svg {
max-width: 100%;
height: auto;
}
<div>
<svg width="100%" height="370px" viewBox="0 0 1148.942 598.47" preserveAspectRatio="none" >
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="1153" height="680">
<image xlink:href="images/headerBackground.png" x="0" y="0" width="1153" height="680" />
</pattern>
</defs>
<path fill="url(#img1)" d="M1145.237,3.395H3.379v592c0,0,247.108-160.416,1141-99L1145.237,3.395z"/>
</svg>
</div>
IMO opinion, the simple solution to your problem is to use a different preserveAspectRatio on your SVG.
Using preserveAspectRatio="none" is going to stretch your SVG and cause problems.
I'm assuming you want to keep the shape of the "swoop" on the bottom of your path. Correct?
If that is the case, you might prefer to use
preserveAspectRatio="xMidYMax slice"
instead. This scales the SVG up to fill the full width of the SVG viewport, whilst keeping the aspect ratio the same, and keeping the bottom of the SVG viewBox on screen.
<svg width="100%" height="370px" viewBox="0 0 1148.942 598.47" preserveAspectRatio="xMidYMax slice">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="1153" height="680">
<image xlink:href="http://lorempixel.com/1153/680/" x="0" y="0" width="1153" height="680" />
</pattern>
</defs>
<path fill="url(#img1)" d="M1145.237,3.395H3.379v592c0,0,247.108-160.416,1141-99L1145.237,3.395z"/>
</svg>
I am doing a clipping mask through SVG clip path. I am using one SVG element with three clipping masking.
Problem is my svg is getting full window width and height, therefore images are also getting full width and height.
So what I want is to move the image inside the clipping path so that I can show the actual area of the image
Here is the Jsfiddle link.
I don't want to change the image's aspect ratio..
please let me know if there is any way for this .
Thanks
If you don't want your images to stretch and break their aspect ratio, then don't use preserveAspectRatio="none". You'll probably want to use one of the "xxx slice" variants. Below I have used different ones for each image in order to have them align to the left, centre and right repectively.
*{padding:0px; margin: 0px;}
html, body {width: 100%; height: 100%;}
<svg version="1.1" id="triagnleSvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
xml:space="preserve">
<clipPath id="last" clipPathUnits="objectBoundingBox">
<polygon points="1,0 .78,0 0.58,1 1,1"/>
</clipPath>
<clipPath id="first" clipPathUnits="objectBoundingBox">
<polygon points="0,0 0.4,0 0.218,1 0,1"/>
</clipPath>
<clipPath id="mid" clipPathUnits="objectBoundingBox">
<polygon points="0.4,0 0.78,0 0.58,1 0.218,1"/>
</clipPath>
<image class="topImage" clip-path="url(#mid)" preserveAspectRatio="xMidYMid slice" width="100%" height="100%" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit3.jpg"/>
<!-- top -->
<image class="leftImage" clip-path="url(#first)" preserveAspectRatio="xMinYMid slice" width="100%" height="100%" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit2.jpg"/>
<!-- right -->
<image class="rightImage" clip-path="url(#last)" preserveAspectRatio="xMaxYMid slice" width="100%" height="100%" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit1.jpg"/>
</svg>
Update
[I am] still unable to get the exact view for the first image. I want to show the girl's face. but its not happening
One solution would be to change your images so that the area of interest is in the desired part of the image.
Otherwise you need to start working with viewBoxes. However, once a viewBox gets involved though, you can no longer stretch the parent SVG to fill the page width and height as per the original example. You'll have to be satisfied with a fixed aspect ratio for the image as a whole.
Here's one way to solve your problem:
*{padding:0px; margin: 0px;}
html, body {width: 100%; height: 100%;}
<svg version="1.1" id="triagnleSvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2 1">
<defs>
<clipPath id="mid" clipPathUnits="objectBoundingBox">
<polygon points="0.3,0 1,0 0.7,1 0,1"/>
</clipPath>
</defs>
<image class="leftImage" preserveAspectRatio="xMaxYMid slice" width="1" height="1"
xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit2.jpg"/>
<image class="rightImage" preserveAspectRatio="xMidYMid slice" x="1" width="1" height="1"
xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit1.jpg"/>
<image class="topImage" preserveAspectRatio="xMidYMid slice" x="0.5" width="1" height="1"
xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit3.jpg"
clip-path="url(#mid)"/>
</svg>
You might want to change the x (and maybe the y, too) for your images and apply the opposite translation to their corresponding clipping paths.
<!-- language: lang-html -->
<svg version="1.1" id="triagnleSvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none"
xml:space="preserve">
<clipPath id="last" clipPathUnits="objectBoundingBox" transform="translate(-200,0)">
<polygon points="1,0 .78,0 0.58,1 1,1"/>
</clipPath>
<clipPath id="first" clipPathUnits="objectBoundingBox" transform="translate(450,0)">
<polygon points="0,0 0.4,0 0.218,1 0,1"/>
</clipPath>
<clipPath id="mid" clipPathUnits="objectBoundingBox">
<polygon points="0.4,0 0.78,0 0.58,1 0.218,1"/>
</clipPath>
<image class="topImage" clip-path="url(#mid)" width="100%" height="100%" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit3.jpg"/>
<!-- top -->
<image class="leftImage" clip-path="url(#first)" width="100%" height="100%" x="-450" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit2.jpg"/>
<!-- right -->
<image class="rightImage" clip-path="url(#last)" width="100%" height="100%" x="200" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit1.jpg"/>
</svg>
However, if you are not fixing the minimum and maxumum width and height of the svg or its container, you might show blank parts of the image outside its boundaries. You can set min-height, max-height, min-width, or max-widthon the css for the svg or its container.
Also, since showing the interesting area rather depends on the device/browser width, an extra enhancement would be to automatically compute the exact translations to center the region of interest with a script, depending on the user's width.
I have an SVG document with an emebedded image element like so:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 200 200">
<image xlink:href="hannibal.jpg" x="0" y="0" width="200" height='200' />
</svg>
I can't know ahead of time the width and height of the linked image.
How can I set the width of the image to be the same as the viewBox, and allow the height to autoscale?
Failing this, can I align the image content to the top of the image element?
If you want the image to be at the top of the viewBox, rather than the centre, you just have to set preserveAspectRatio="xMidYMin".
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 200 200">
<image xlink:href="hannibal.jpg" x="0" y="0" width="200" height="200"
preserveAspectRatio="xMidYMin"/>
</svg>
This should work as long as the height is never greater than the width.
I'm trying to fill SVG image with a pattern in HTML, but I'm not successfull. If I fill with the pattern path, it works. But I cannot apply it onto svg image.
Could you help me please?
Here is example.
Here is example code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="400" height="400">
<defs>
<pattern id="image" x="0" y="0" width="400" height="400" patternUnits="userSpaceOnUse">
<image x="0" y="0" xlink:href="latka.jpg" width="100" height="100" />
</pattern>
</defs>
<image x="0" y="0" width="400" height="400" xlink:href="kosile.svg" fill="url(#image)"/>
</svg>
It makes no sense to apply a fill attribute to an embedded SVG. I assume what you were trying to do is create a tiled background on which to superimpose the linked SVG. The easiest way to do this is by adding a <rect> element filled with the background pattern, then put your embedded SVG image on top of this.
Here's an example:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200" viewBox="0 0 200 200">
<defs>
<!-- define a pattern using a yellow tile image -->
<pattern id="bgimg" x="0" y="0" width="60" height="60"
patternUnits="userSpaceOnUse">
<image x="0" y="0" width="60" height="60"
xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Shades_of_yellow.png/60px-Shades_of_yellow.png" />
</pattern>
</defs>
<!-- use this pattern to fill the SVG background -->
<rect x="0" y="0" width="200" height="200" fill="url(#bgimg)" />
<!-- Embed another SVG (purple circle) on top of this background -->
<image x="40" y="40" width="120" height="120"
xlink:href="http://upload.wikimedia.org/wikipedia/commons/5/5e/FF0084_circle.svg" />
</svg>