Menu
I am trying to create a paper texture look with svg, which I have working fairly well, using a transparent overlay to add the texture over the basic color of the svg item below it.
However, I notice that the texture scales with the SVG. Since the image is set to the width of the page, on large monitors it becomes extremely stretched and does not look very nice.
Is it possible to have the svg asset scale automatically, with a fixed-size pattern fill?
Here is a codepen with a full example: http://codepen.io/mix3d/pen/jWMPQE
EDIT: Updated codepen with actual svg, not a theoretical one
Bonus points if the SVG can stretch with the fill tiling from the center. Thanks!
This is how the SVG looks currently, but the texture scales with the svg
<svg version="1.1" id="paper_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="10 0 1526 407.93">
<style type="text/css">
.overlay{fill:url(#img1);fill-opacity:1;}
.circle{fill:#62B4B8;}
</style>
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="243" height="201">
<image xlink:href="http://i.imgur.com/grtbkje.png" x="0" y="0" width="486" height="402" />
</pattern>
<filter id="f3" x="-40%" y="0" width="180%" height="400%">
<feOffset result="offOut" in="SourceAlpha" dx="0" dy="3" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
<feColorMatrix in="blurOut" result="transparency" type="matrix"
values="0 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 .5 0"/>
<feBlend in="SourceGraphic" in2="transparency" mode="normal" />
</filter>
</defs>
<g>
<circle id="Background_Circle" class="circle" cx="280.52" cy="226.67" r="166.67"/>
<!-- I know I could probably use a filter to achieve the same overlay effect, but this worked for now, duplicate the object with the semi-transparent fill pattern -->
<circle id="Background_Circle" class="overlay" cx="280.52" cy="226.67" r="166.67"/>
</g>
</svg>
901
Once you add a viewBox to your <svg> (and editors like Inkscape and Illustrator will add it by default), you can use that SVG file as an image, or as inline SVG code, and it will scale perfectly to fit within whatever size you give it.
We use viewBox to make the SVG image scalable. viewBox = “0 0 100 100”: defines a coordinate system having x=0, y=0, width=100 units and height=100 units. Thus, the SVG containing a rectangle having width=50px and height=50px will fill up the height and width of the SVG image, and all the dimensions get scaled equally.
You should set the viewBox attribute first, and then make all of your dimensions within your svg relative to that. When you assign height and width (whether in your svg tag or in your css) you are adjusting the size of the svg bounding box, not the size of the elements within it.
“In the SVG declaration after the doctype, simply remove the width and height attributes. This forces the browser to always fill the containing DIV or box with your SVG.”
Yes you can do it. But you need to remove the viewBox.
Then, if you make the <rect> have a width and height of 100%, you can make the SVG any size you want and the pattern will repeat and fill the entire SVG.
#svg1 {
width: 100px;
height: 100px;
}
#svg2 {
width: 250px;
height: 250px;
}<svg id="svg1">
<defs>
<pattern id="pattern2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="5" fill=#0000ff />
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" style="stroke: #000000; fill: url(#pattern2);" />
</svg>
<svg id="svg2">
<defs>
<pattern id="pattern2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="5" fill=#0000ff />
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" style="stroke: #000000; fill: url(#pattern2);" />
</svg>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
