Scale inline SVG with DIV wrapper - html

Is it possible to scale an inline SVG without touching the SVG? So that only the wrapper div is able to change the width / height according to the image ratio?
Here is my code:
https://jsfiddle.net/sekmwfdg/1/
<div id="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-gb" width="640" height="480">
<defs>
<clipPath id="a">
<path fill-opacity=".67" d="M-85.333 0h682.67v512h-682.67z"/>
</clipPath>
</defs>
<g clip-path="url(#a)" transform="translate(80) scale(.94)">
<g stroke-width="1pt">
<path fill="#006" d="M-256 0H768.02v512.01H-256z"/>
<path fill="#fff" d="M-256 0v57.244l909.535 454.768H768.02V454.77L-141.515 0H-256zM768.02 0v57.243L-141.515 512.01H-256v-57.243L653.535 0H768.02z"/>
<path fill="#fff" d="M170.675 0v512.01h170.67V0h-170.67zM-256 170.67v170.67H768.02V170.67H-256z"/>
<path fill="#c00" d="M-256 204.804v102.402H768.02V204.804H-256zM204.81 0v512.01h102.4V0h-102.4zM-256 512.01L85.34 341.34h76.324l-341.34 170.67H-256zM-256 0L85.34 170.67H9.016L-256 38.164V0zm606.356 170.67L691.696 0h76.324L426.68 170.67h-76.324zM768.02 512.01L426.68 341.34h76.324L768.02 473.848v38.162z"/>
</g>
</g>
</svg>
</div>
It should work for all modern Browsers + IE 11


You should add viewBox="0 0 640 480" to you svg tag and it will take width and height from its parent container
<div id="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-gb" viewBox="0 0 640 480">
<defs>
<clipPath id="a">
<path fill-opacity=".67" d="M-85.333 0h682.67v512h-682.67z"/>
</clipPath>
</defs>
<g clip-path="url(#a)" transform="translate(80) scale(.94)">
<g stroke-width="1pt">
<path fill="#006" d="M-256 0H768.02v512.01H-256z"/>
<path fill="#fff" d="M-256 0v57.244l909.535 454.768H768.02V454.77L-141.515 0H-256zM768.02 0v57.243L-141.515 512.01H-256v-57.243L653.535 0H768.02z"/>
<path fill="#fff" d="M170.675 0v512.01h170.67V0h-170.67zM-256 170.67v170.67H768.02V170.67H-256z"/>
<path fill="#c00" d="M-256 204.804v102.402H768.02V204.804H-256zM204.81 0v512.01h102.4V0h-102.4zM-256 512.01L85.34 341.34h76.324l-341.34 170.67H-256zM-256 0L85.34 170.67H9.016L-256 38.164V0zm606.356 170.67L691.696 0h76.324L426.68 170.67h-76.324zM768.02 512.01L426.68 341.34h76.324L768.02 473.848v38.162z"/>
</g>
</g>
</svg>
</div>

Related

how to mask an svg shape to an svg image

So basically I have a triangular shape and I want to mask it in an image/gif.
<svg width="209" height="143" viewBox="0 0 209 143" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" fill="black"/>
</svg>
<div class="clipSvg2">
<svg viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask11">
<!-- <svg width="209" height="143" viewBox="0 0 209 143" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" fill="black"/>
</svg>
-->
</mask>
</defs>
//Here add some mask=url(#mask11)
<image
width="100%" height="100%" xlink:href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"></image>
</svg>
</div>
As you see I'm trying to mask the mask11 in my image but I can't do that..I've search a lot here and its not really working I don't know how or what to do about it can anyone help me? Thanks a lot.

I'm not sure what it should look like, but here are two examples. The first uses a clip-path. With the clip-rule="evenodd" it is only the "frame" that shows.
The second is a mask. In the mask the path has a white fill – that is what makes the image show.
In both cases I made the viewBox the same aspect ratio as the image to make the image take up the entire space of the SVG.
<svg width="300" viewBox="0 0 284 178" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="cp1">
<path clip-rule="evenodd"
d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" />
</clipPath>
</defs>
<image width="100%" height="100%"
href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"
clip-path="url(#cp1)"/>
</svg>
<svg width="300" viewBox="0 0 284 178" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="m1">
<path d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z"
fill="white"/>
</mask>
</defs>
<image width="100%" height="100%"
href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"
mask="url(#m1)"/>
</svg>

SVG logo not displaying correctly on mobile

I've created the following SVG:
It is being correctly displayed on desktop, but the problem is on mobile. Here is a screenshot of how it is being displayed:
Here is the SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210.42 49.75">
<defs>
<style>
.cls-1,.cls-3{font-size:48px;font-family:SHOOTING;}
.cls-2{letter-spacing:-0.02em;}
.cls-3{fill:#ffb857;}
.cls-4{fill:#ff8f00;letter-spacing:0em;}
</style>
</defs>
<title>logo</title>
<g id="Capa_4" data-name="Capa 4">
<text class="cls-1" transform="translate(41 41.79)">BUS<tspan class="cls-2" x="52.37" y="0">C</tspan><tspan x="68.78" y="0">AMINAS</tspan></text>
</g>
<g id="Capa_3" data-name="Capa 3">
<text class="cls-3" transform="translate(42.76 40.32)">BUS<tspan class="cls-2" x="52.37" y="0">C</tspan><tspan x="68.78" y="0">A</tspan><tspan class="cls-4" x="87.17" y="0">MINAS</tspan></text>
<path d="M34.69,19.49a1.27,1.27,0,0,0-.7-.72,1.29,1.29,0,0,0-1,0,11.93,11.93,0,0,0-4,2.63,12.08,12.08,0,0,0-2.63,4,1.29,1.29,0,0,0,0,1,1.26,1.26,0,0,0,.73.7,1.34,1.34,0,0,0,.49.1,1.28,1.28,0,0,0,1.25-.83,9.17,9.17,0,0,1,2-3.07,9.06,9.06,0,0,1,3.08-2,1.39,1.39,0,0,0,.72-.73A1.29,1.29,0,0,0,34.69,19.49Zm19.53-7.37,1,1-5.06,5,1.41,1.4a1.29,1.29,0,0,1,.4.95,1.26,1.26,0,0,1-.4.94L50.2,22.73a14.61,14.61,0,0,1,.69,12.78,14.32,14.32,0,0,1-7.77,7.77,14.55,14.55,0,0,1-11.34,0,14.69,14.69,0,0,1-4.66-3.11,14.75,14.75,0,0,1-4.26-10.33A14.26,14.26,0,0,1,24,24.17a14.58,14.58,0,0,1,20.55-7.08l1.32-1.33a1.31,1.31,0,0,1,.95-.39,1.29,1.29,0,0,1,.94.39l1.41,1.41ZM54.38,11a.63.63,0,0,1-.45.21.66.66,0,0,1-.48-.21L51.56,9.09a.72.72,0,0,1-.18-.48.67.67,0,0,1,1.14-.47L54.38,10a.61.61,0,0,1,.21.47A.59.59,0,0,1,54.38,11Zm4.77,4.77a.69.69,0,0,1-.95,0l-1.87-1.88a.63.63,0,0,1,0-.94.6.6,0,0,1,.47-.2.58.58,0,0,1,.46.2l1.89,1.87a.69.69,0,0,1,0,1Zm.85-3.8a.62.62,0,0,1-.19.48.65.65,0,0,1-.47.19h-2a.65.65,0,0,1-.67-.67.65.65,0,0,1,.19-.47.62.62,0,0,1,.48-.19h2a.65.65,0,0,1,.66.66ZM56,8v2a.66.66,0,1,1-1.32,0V8A.66.66,0,1,1,56,8Zm3.13,1.14L57.26,11a.61.61,0,0,1-.45.21.66.66,0,0,1-.48-.21.59.59,0,0,1-.21-.46.61.61,0,0,1,.21-.47L58.2,8.14A.64.64,0,0,1,58.67,8a.65.65,0,0,1,.67.66A.73.73,0,0,1,59.15,9.09Z" transform="translate(-22.86 -1.21)"/>
</g>
</svg>
Here is the HTML where I have the SVG:
<div class="logo"><img src="./source/logo.svg" alt="Buscaminas" width="255px"></div>
Here is the CSS for the div:
.logo {
height: 50px;
width: 255px;
margin: 10px auto 19px;
}
How can I fix this problem?

I've removed the x and y attributes of the <tspan> elements. This is fixing the problem with the crammed text. However since you are using a special font-family that is not disponible, the font-family is different and the text is wider. In order to get all the text inside the svg canvas I had to change the value of the viewBox. Probably a good idea would be using an alternative font-family, for example Arial.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 60">
<defs>
<style>
.cls-1,.cls-3{font-size:48px;font-family:SHOOTING, Arial;}
.cls-2{letter-spacing:-0.02em;}
.cls-3{fill:#ffb857;}
.cls-4{fill:#ff8f00;letter-spacing:0em;}
</style>
</defs>
<title>logo</title>
<g id="wrapper">
<g id="Capa_4" data-name="Capa 4">
<text class="cls-1" x="41" y="41.79">BUS<tspan class="cls-2" >C</tspan><tspan>AMINAS</tspan></text>
</g>
<g id="Capa_3" data-name="Capa 3">
<text class="cls-3" x="42.76" y="40.32">BUS<tspan class="cls-2" >C</tspan><tspan>A</tspan><tspan class="cls-4">MINAS</tspan></text>
<path id="b" d="M34.69,19.49a1.27,1.27,0,0,0-.7-.72,1.29,1.29,0,0,0-1,0,11.93,11.93,0,0,0-4,2.63,12.08,12.08,0,0,0-2.63,4,1.29,1.29,0,0,0,0,1,1.26,1.26,0,0,0,.73.7,1.34,1.34,0,0,0,.49.1,1.28,1.28,0,0,0,1.25-.83,9.17,9.17,0,0,1,2-3.07,9.06,9.06,0,0,1,3.08-2,1.39,1.39,0,0,0,.72-.73A1.29,1.29,0,0,0,34.69,19.49Zm19.53-7.37,1,1-5.06,5,1.41,1.4a1.29,1.29,0,0,1,.4.95,1.26,1.26,0,0,1-.4.94L50.2,22.73a14.61,14.61,0,0,1,.69,12.78,14.32,14.32,0,0,1-7.77,7.77,14.55,14.55,0,0,1-11.34,0,14.69,14.69,0,0,1-4.66-3.11,14.75,14.75,0,0,1-4.26-10.33A14.26,14.26,0,0,1,24,24.17a14.58,14.58,0,0,1,20.55-7.08l1.32-1.33a1.31,1.31,0,0,1,.95-.39,1.29,1.29,0,0,1,.94.39l1.41,1.41ZM54.38,11a.63.63,0,0,1-.45.21.66.66,0,0,1-.48-.21L51.56,9.09a.72.72,0,0,1-.18-.48.67.67,0,0,1,1.14-.47L54.38,10a.61.61,0,0,1,.21.47A.59.59,0,0,1,54.38,11Zm4.77,4.77a.69.69,0,0,1-.95,0l-1.87-1.88a.63.63,0,0,1,0-.94.6.6,0,0,1,.47-.2.58.58,0,0,1,.46.2l1.89,1.87a.69.69,0,0,1,0,1Zm.85-3.8a.62.62,0,0,1-.19.48.65.65,0,0,1-.47.19h-2a.65.65,0,0,1-.67-.67.65.65,0,0,1,.19-.47.62.62,0,0,1,.48-.19h2a.65.65,0,0,1,.66.66ZM56,8v2a.66.66,0,1,1-1.32,0V8A.66.66,0,1,1,56,8Zm3.13,1.14L57.26,11a.61.61,0,0,1-.45.21.66.66,0,0,1-.48-.21.59.59,0,0,1-.21-.46.61.61,0,0,1,.21-.47L58.2,8.14A.64.64,0,0,1,58.67,8a.65.65,0,0,1,.67.66A.73.73,0,0,1,59.15,9.09Z" transform="translate(-22.86 -1.21)"/>
</g>
</g>
</svg>
UPDATE
In order to control the length of the text you can use the textLength and lengthAdjust attributes like so:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 245 55">
<defs>
<style>
.cls-1,.cls-3{font-size:48px;font-family:SHOOTING,Arial;}
.cls-2{letter-spacing:-0.02em;}
.cls-3{fill:#ffb857;}
.cls-4{fill:#ff8f00;letter-spacing:0em;}
</style>
</defs>
<title>logo</title>
<g id="Capa_4" data-name="Capa 4">
<text class="cls-1" x="41" y="41.79" textLength="200" lengthAdjust="spacingAndGlyphs">BUS<tspan class="cls-2" >C</tspan><tspan>AMINAS</tspan></text>
</g>
<g id="Capa_3" data-name="Capa 3">
<text textLength="200" lengthAdjust="spacingAndGlyphs" class="cls-3" x="42.76" y="40.32">BUS<tspan class="cls-2" >C</tspan><tspan>A</tspan><tspan class="cls-4">MINAS</tspan></text>
<path id="b" d="M34.69,19.49a1.27,1.27,0,0,0-.7-.72,1.29,1.29,0,0,0-1,0,11.93,11.93,0,0,0-4,2.63,12.08,12.08,0,0,0-2.63,4,1.29,1.29,0,0,0,0,1,1.26,1.26,0,0,0,.73.7,1.34,1.34,0,0,0,.49.1,1.28,1.28,0,0,0,1.25-.83,9.17,9.17,0,0,1,2-3.07,9.06,9.06,0,0,1,3.08-2,1.39,1.39,0,0,0,.72-.73A1.29,1.29,0,0,0,34.69,19.49Zm19.53-7.37,1,1-5.06,5,1.41,1.4a1.29,1.29,0,0,1,.4.95,1.26,1.26,0,0,1-.4.94L50.2,22.73a14.61,14.61,0,0,1,.69,12.78,14.32,14.32,0,0,1-7.77,7.77,14.55,14.55,0,0,1-11.34,0,14.69,14.69,0,0,1-4.66-3.11,14.75,14.75,0,0,1-4.26-10.33A14.26,14.26,0,0,1,24,24.17a14.58,14.58,0,0,1,20.55-7.08l1.32-1.33a1.31,1.31,0,0,1,.95-.39,1.29,1.29,0,0,1,.94.39l1.41,1.41ZM54.38,11a.63.63,0,0,1-.45.21.66.66,0,0,1-.48-.21L51.56,9.09a.72.72,0,0,1-.18-.48.67.67,0,0,1,1.14-.47L54.38,10a.61.61,0,0,1,.21.47A.59.59,0,0,1,54.38,11Zm4.77,4.77a.69.69,0,0,1-.95,0l-1.87-1.88a.63.63,0,0,1,0-.94.6.6,0,0,1,.47-.2.58.58,0,0,1,.46.2l1.89,1.87a.69.69,0,0,1,0,1Zm.85-3.8a.62.62,0,0,1-.19.48.65.65,0,0,1-.47.19h-2a.65.65,0,0,1-.67-.67.65.65,0,0,1,.19-.47.62.62,0,0,1,.48-.19h2a.65.65,0,0,1,.66.66ZM56,8v2a.66.66,0,1,1-1.32,0V8A.66.66,0,1,1,56,8Zm3.13,1.14L57.26,11a.61.61,0,0,1-.45.21.66.66,0,0,1-.48-.21.59.59,0,0,1-.21-.46.61.61,0,0,1,.21-.47L58.2,8.14A.64.64,0,0,1,58.67,8a.65.65,0,0,1,.67.66A.73.73,0,0,1,59.15,9.09Z" transform="translate(-22.86 -1.21)"/>
</g>
</svg>

Why does my SVG image get cut out rather than resizing when nested inside another SVG?

I have an SVG that I want to fit in a smaller box, while preserving all ratios. I'm trying to do this by nesting the SVG inside another SVG with smaller width/height and viewbox numbers, but instead of resizing, the image is getting cut out.
I've tried nesting the original SVG inside another SVG with different viewbox numbers.
Original SVG
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0.0" y="0.0" width="2060.0" height="1340.0" xml:space="preserve" viewBox="0.0 0.0 2060.0 1340.0">
<!-- The artwork image. -->
<image dragTarget="true" scaleTarget="true" dragConstraint="canvas-front-rect" scaleConstraint="canvas-front-rect" id="artwork-image" x="5" y="-100.0" width="2400" height="1500"
preserveAspectRatio="xMidYMid slice" xlink:href="https://www.printbit.com/wp-content/uploads/2017/06/happy-people.jpg" />
<!-- The "sides" -->
<g transform="scale(1, -1) translate(0, -140)" >
<use clip-path="url(#clip-path-top)" xlink:href="#artwork-image" />
</g>
<g transform="scale(1, -1) translate(0, -2540)" >
<use clip-path="url(#clip-path-bottom)" xlink:href="#artwork-image" />
</g>
<g transform="scale(-1, 1) translate(-140, 0)" >
<use clip-path="url(#clip-path-left)" xlink:href="#artwork-image" />
</g>
<g transform="scale(-1, 1) translate(-3980, 0)" >
<use clip-path="url(#clip-path-right)" xlink:href="#artwork-image" />
</g>
<!-- Constraint information -->
<rect id="canvas-front-rect" constraint="gte" x="70.0" y="70.0" width="1920.0" height="1200.0" stroke-width="1" stroke="#0000FF" fill="none" visibility="visible" />
<!-- Clip path definitions for the mirroring -->
<defs>
<clipPath id="clip-path-top"> <rect x="70.0" y="70.0" width="1920.0" height="70.0" stroke="#00FF00" fill="none"/> </clipPath>
<clipPath id="clip-path-bottom"> <rect x="70.0" y="1200.0" width="1920.0" height="70.0" stroke="#00FF00" fill="none"/> </clipPath>
<clipPath id="clip-path-left"> <rect x="70.0" y="70.0" width="70.0" height="1200.0" stroke="#00FF00" fill="none"/> </clipPath>
<clipPath id="clip-path-right"> <rect x="1920.0" y="70.0" width="70.0" height="1200.0" stroke="#00FF00" fill="none"/></clipPath>
</defs>
</svg>
and I'm trying to nest this inside of
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0.0"
y="0.0"
width="492.16"
height="406.83"
xml:space="preserve"
viewBox="0.0 0.0 492.16 406.83"
></svg>
Expected Result: I want the original SVG to show up as a smaller version of itself, with all ratios preserved.
Actual: However, instead of just resizing, the image gets cut out.

Take the width and height off the nested <svg/> element. Then it will adapt to the size of the parent.
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0.0"
y="0.0"
width="492.16"
height="406.83"
xml:space="preserve"
viewBox="0.0 0.0 492.16 406.83"
>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0.0" y="0.0" xml:space="preserve" viewBox="0.0 0.0 2060.0 1340.0">
<!-- The artwork image. -->
<image dragTarget="true" scaleTarget="true" dragConstraint="canvas-front-rect" scaleConstraint="canvas-front-rect" id="artwork-image" x="5" y="-100.0" width="2400" height="1500"
preserveAspectRatio="xMidYMid slice" xlink:href="https://www.printbit.com/wp-content/uploads/2017/06/happy-people.jpg" />
<!-- The "sides" -->
<g transform="scale(1, -1) translate(0, -140)" >
<use clip-path="url(#clip-path-top)" xlink:href="#artwork-image" />
</g>
<g transform="scale(1, -1) translate(0, -2540)" >
<use clip-path="url(#clip-path-bottom)" xlink:href="#artwork-image" />
</g>
<g transform="scale(-1, 1) translate(-140, 0)" >
<use clip-path="url(#clip-path-left)" xlink:href="#artwork-image" />
</g>
<g transform="scale(-1, 1) translate(-3980, 0)" >
<use clip-path="url(#clip-path-right)" xlink:href="#artwork-image" />
</g>
<!-- Constraint information -->
<rect id="canvas-front-rect" constraint="gte" x="70.0" y="70.0" width="1920.0" height="1200.0" stroke-width="1" stroke="#0000FF" fill="none" visibility="visible" />
<!-- Clip path definitions for the mirroring -->
<defs>
<clipPath id="clip-path-top"> <rect x="70.0" y="70.0" width="1920.0" height="70.0" stroke="#00FF00" fill="none"/> </clipPath>
<clipPath id="clip-path-bottom"> <rect x="70.0" y="1200.0" width="1920.0" height="70.0" stroke="#00FF00" fill="none"/> </clipPath>
<clipPath id="clip-path-left"> <rect x="70.0" y="70.0" width="70.0" height="1200.0" stroke="#00FF00" fill="none"/> </clipPath>
<clipPath id="clip-path-right"> <rect x="1920.0" y="70.0" width="70.0" height="1200.0" stroke="#00FF00" fill="none"/></clipPath>
</defs>
</svg>
</svg>

Why is this svg not working in safari?

The following svg is working in chrome and firefox, but is not working in Safari. And I haven't been able to test it in ie.
Safari does show the image, but does not apply the mask.
<div class="widget-image-l">
<svg width="645px" height="470px" viewBox="0 0 645 470" version="1.1">
<g stroke="none" fill-rule="evenodd">
<mask id="mask" fill="white">
<path d="M38.5969948,-2.22080132e-11 C16.8456745,30.2125678 3.07305242,70.3781435 0.923015792,123.840504 C-7.15396842,324.681101 174,465.890038 341,469.890015 C508,473.889991 658.942386,367.295224 643.971193,180.147362 C637.875363,103.946248 607.401187,44.0482171 563.7625,-2.35331754e-11 L38.5969948,-1.42108547e-14 Z" id="path"></path>
</mask>
<g mask="url(#mask)">
<image x="-1020" y="0" width="1867.94872" height="470" xlink:href="http://www.castleknockhotel.com/cmsGallery/imagerow/5904/resized/1600x400/cycling_passion_of_life_high_resolution_wallpaper_for_desktop_background_download_cycling_images_free.jpg" transform="scale(-1 1)">
</image>
</g>
</g>
</svg>
</div>

Overlay a svg with a transparent background pattern

Question
How can I overlay a transparent image pattern (PNG) over a SVG, while keeping the overlaid image pattern within the SVG's bounds, and keeping the SVG's fill visible?
Kind of like how in CSS you can define both background-color and backgroud-image.
Eg. background: red url(noise.png) top left repeat;
Image Example of what I am looking for
In this image, the balloon on the left is the SVG I currently have. What I'm trying to achieve is how the right balloon looks with noise applied to it.
Code Example:
Here's a code example of what I've tried so far:
FULL DEMO: http://staging.kassandrapoon.com/tests/svg/ (Sorry for the non-jsfiddle or code pen example. The background pattern wasn't loading cross domain)
SVG with my pattern attempt:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="143px" height="214px" viewBox="0 0 143 214" enable-background="new 0 0 143 214" xml:space="preserve">
<defs>
<!-- noise.png -->
<style type="text/css">
<![CDATA[
.filtered{
filter: url(#filter);
}
]]>
</style>
<filter id="filter" filterUnits="userSpaceOnUse">
<feImage xlink:href="noise.png" x="0" y="0" width="198" height="193" result="IMAGEFILL"/>
<feTile in="IMAGEFILL" result="TILEPATTERN"/>
<feComposite operator="in" in="TILEPATTERN" in2="SourceAlpha"/>
</filter>
</defs>
<g>
<g class="filtered">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#DE3F18" points="90.8,214 53.2,214 47.3,175.9 98.1,175.9 "/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#DE3F18" d="M143,72.6c0-39.5-32-71.7-71.5-71.7S0,33.2,0,72.7
C0,79.1,0.9,86,2.4,91.6c0,0,1.3,4.4,2,6.2C4.6,98.2,5,98.6,5.1,99c0.5,1.3,1.2,2.7,1.8,4c0.3,0.6,0.6,1.1,0.9,1.6
c0.6,1.1,1.2,2.3,1.8,3.4c0.3,0.6,0.7,1.1,1,1.7c0.7,1.1,1.3,2.1,2,3.1c0.4,0.5,0.8,1.1,1.1,1.6c0.7,1,1.5,2,2.3,3
c0.4,0.5,0.8,1,1.2,1.4c0.8,1,1.7,1.9,2.6,2.9c0.4,0.4,0.8,0.8,1.2,1.3c1,1,2,1.9,3,2.8c0.4,0.3,0.8,0.7,1.2,1
c0.3,0.2,0.5,0.5,0.8,0.7L46.4,158h2.8h44.5h2.8l20.3-30.6c0.3-0.2,0.5-0.5,0.8-0.7c0.4-0.3,0.8-0.7,1.2-1c1-0.9,2-1.8,3-2.8
c0.4-0.4,0.8-0.8,1.2-1.3c0.9-0.9,1.8-1.9,2.6-2.9c0.4-0.5,0.8-1,1.2-1.4c0.8-1,1.6-2,2.3-3c0.4-0.5,0.8-1,1.1-1.6
c0.7-1,1.4-2.1,2-3.1c0.3-0.6,0.7-1.1,1-1.7c0.6-1.1,1.2-2.2,1.8-3.4c0.3-0.6,0.6-1.1,0.9-1.7c0.6-1.3,1.2-2.6,1.7-4
c0.2-0.4,0.4-0.8,0.5-1.3c0.7-1.8,2.3-7,2.3-7S143,79,143,72.6z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#F9F9EF" d="M126.1,68.4c0-37.4-24.4-68.8-55.2-68.8h0.3h-0.3
C40-0.3,14.7,31.1,14.7,68.4c0,0,0,0,0,0.1c0,0,0,0.1,0,0.1c0,6,1.2,12.5,2.2,17.2c0.2,0.8,0.9,2.6,1.3,4.2c0.4,1,0.9,2,1.3,3.2
c0.3,1,0.8,1.9,1.1,2.9c0.4,0.8,0.7,1.5,1.1,2.4c0.5,1.1,0.9,2.1,1.3,3l0.9,1.8c0.5,1,1,2,1.6,2.9l0.9,1.5c0,0.1,0.1,0.1,0.1,0.2
c0.6,0.9,1.1,1.8,1.6,2.6c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0.3,0.5,0.6,0.9,1,1.4c0.7,0.9,29.4,46.8,29.4,46.8h25.7
c0,0,28.7-45.8,29.4-46.8c0.3-0.5,0.6-0.9,1-1.4c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0.5-0.8,1.1-1.6,1.6-2.6
c0-0.1,0.1-0.1,0.1-0.2l0.9-1.5c0.5-0.9,1-1.9,1.6-2.9l0.9-1.8c0.4-0.8,0.9-1.9,1.3-3c0.3-0.8,0.7-1.6,1-2.4
c0.4-0.9,0.8-1.9,1.1-2.9c0.4-1.2,0.8-2.2,1.2-3.2c0.4-1.6,0.2-3.3,0.4-4.2c1.1-4.6,1.1-11.2,1.1-17.2
C126.1,68.6,126.1,68.5,126.1,68.4C126.1,68.5,126.1,68.4,126.1,68.4z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#DE3F18" d="M91.9,57.1c0,43.5-21.6,101-21.6,101s-21.6-57.5-21.6-101
S58.9,0.7,70.4,0.7C79.1,0.7,91.9,13.6,91.9,57.1z"/>
<polyline fill="none" stroke="#FC611F" stroke-width="1.8927" stroke-miterlimit="10" points="47.9,175.9 27.8,130 70.6,130
115.2,130.1 96.5,175.9 "/>
<line fill="none" stroke="#FC611F" stroke-width="1.8927" stroke-miterlimit="10" x1="73.2" y1="175.9" x2="72.3" y2="130"/>
<g>
<polygon fill="#DE3F18" points="46.4,158 49.3,158 93.7,158 96.6,158 115.3,130 27.7,130 "/>
</g>
</g>
<g>
<g>
<path fill="#F9F9EF" d="M102.6,188.6c0,5.5-2.3,7.4-5.1,7.4c-2.8,0-5.1-1.9-5.1-7.4s5.1-12.6,5.1-12.6S102.6,183,102.6,188.6z"/>
<path fill="#F9F9EF" d="M77.6,188.6c0,5.5-2.3,7.4-5.1,7.4c-2.8,0-5.1-1.9-5.1-7.4s5.1-12.6,5.1-12.6S77.6,183,77.6,188.6z"/>
<path fill="#F9F9EF" d="M52.6,188.6c0,5.5-2.3,7.4-5.1,7.4c-2.8,0-5.1-1.9-5.1-7.4s5.1-12.6,5.1-12.6S52.6,183,52.6,188.6z"/>
</g>
</g>
</g>
</svg>
I've tried defining a pattern in the SVG like here, but that replaces the existing fill color which I want to keep.