背景画像をソースとして使用するカスタムSVGフィルターを作成しました。次に、ランダムなディスプレースメントマップを適用して、光学歪み（たとえば、水のコースティクス、熱く流れる空気からの反り）をシミュレートします。これは、私が本当に気に入っているものです。
Inkscapeでは正しくレンダリングされますが、InternetExplorer10やChromeでは正しくレンダリングされません。どうやら、背景画像をフィルター入力として使用することは、中間画像をバッファリングするために必要な余分なメモリのために、一部のSVGレンダラーがサポートしない可能性があるあいまいな機能です。また、Inkscapeでも正しく表示するには、SVGレイヤーの1つでenable-background=newを設定する必要がありました。どのWebブラウザまたは無料で利用できるスタンドアロンプログラム（Inkscape以外）がそのような画像を正しく表示できるか知っている人はいますか？
以下に例を添付しました（下半分がフィルターによって歪んでいる星が表示されるはずです）。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg id="svg1380" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" style="enable-background:new" xmlns="http://www.w3.org/2000/svg" height="190" width="367" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs id="defs1382">
<filter id="filter1945" style="color-interpolation-filters:sRGB">
<feTurbulence id="feTurbulence1947" baseFrequency="0.034000000000000009" seed="397" result="turbulence" numOctaves="4" type="turbulence"/>
<feDisplacementMap id="feDisplacementMap1949" scale="100" yChannelSelector="G" in2="turbulence" xChannelSelector="R" in="BackgroundImage"/>
</filter>
<radialGradient id="radialGradient5645" gradientUnits="userSpaceOnUse" cy="402" cx="359" gradientTransform="matrix(.0557 -.0464 .178 .207 268 339)" r="417">
<stop id="stop5641" stop-color="#fee" offset="0"/>
<stop id="stop5643" stop-color="#fee" stop-opacity="0" offset="1"/>
</radialGradient>
<radialGradient id="radialGradient5653" gradientUnits="userSpaceOnUse" cy="407" cx="248" gradientTransform="matrix(.537 -.681 .793 .625 -234 -28)" r="47.2">
<stop id="stop5649" stop-color="#f00" offset="0"/>
<stop id="stop5651" stop-color="#784421" offset="1"/>
</radialGradient>
</defs>
<metadata id="metadata1385">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g fill-rule="evenodd">
<rect id="rect5726" height="135" width="339" y="0" x="27.9"/>
<path id="path5635" opacity=".998" d="m266 80-36-6-18 31-5-35.4-36-7.5 33-16.1-4-35.9 25 25.8 33-14.8-17 32.1z" fill="url(#radialGradient5653)"/>
<rect id="rect1935" transform="matrix(.435 0 .0110 .656 32.9 -151)" height="189" filter="url(#filter1945)" width="694" y="313" x="-13.6" fill="url(#radialGradient5645)"/>
</g>
</svg>