Overlay a svg with a transparent background pattern - html

Question

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.