svg fill image quality. How to fix? - image

I have patterns that each have a single image in them.
I have not used svgs much before and do not know which attributes to change to get clear result. I've been trying all sorts of combinations of preserveAspectRatio, viewBox, patternUnits, but I cannot seem to get what I want.
https://codepen.io/shkasjon/pen/WYwZmy
here you can see that the second svg image is displayed clearly and sharply and the first one is blurred.
How can i fix the quality of the first svg image?
<svg xmlns="http://www.w3.org/2000/svg" width="146" height="146" viewBox="-10 -10 470 468">
<defs><pattern id="image-as_profile_widget-4" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"><image itemprop="photo" height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.gravatar.com/avatar/4a7131ab3b3fa22f2fea9fadaa018981?s=146"></image></pattern></defs><path fill="url(#image-as_profile_widget-4)" d="M9.635 132.808C24.782 59.782 71.388 19.109 144.085 6.822c53.74-9.081 107.5-9.196 161.15.255 74.852 13.185 119.85 56.23 134.185 130.36 11.075 57.29 11.249 115.191-.174 172.427-15.324 72.52-63.132 117.285-135.561 129.527-53.74 9.08-107.5 9.195-161.15-.255-74.852-13.186-120.05-58.38-134.384-132.509-11.64-57.668-10.52-115.935 1.484-173.82z" id="path-1"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="146" height="146" viewBox="-10 -10 146 146">
<defs><pattern id="image-as_profile_widget-2" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"><image itemprop="photo" height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.gravatar.com/avatar/4a7131ab3b3fa22f2fea9fadaa018981?s=146"></image></pattern></defs>
<rect x="0" y="0" rx="4" ry="4" width="146" height="146" fill="url(#image-as_profile_widget-2)" stroke="#ffffff" stroke-width="0" stroke-opacity="1" id="path-1"></rect>
</svg>


patternUnits="userSpaceOnUse" add to <pattern >
<svg xmlns="http://www.w3.org/2000/svg" width="146" height="146" viewBox="-10 -10 470 468">
<defs><pattern id="image-as_profile_widget-4" height="100%" width="100%" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"><image itemprop="photo" height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.gravatar.com/avatar/4a7131ab3b3fa22f2fea9fadaa018981?s=146"></image></pattern></defs><path fill="url(#image-as_profile_widget-4)" d="M9.635 132.808C24.782 59.782 71.388 19.109 144.085 6.822c53.74-9.081 107.5-9.196 161.15.255 74.852 13.185 119.85 56.23 134.185 130.36 11.075 57.29 11.249 115.191-.174 172.427-15.324 72.52-63.132 117.285-135.561 129.527-53.74 9.08-107.5 9.195-161.15-.255-74.852-13.186-120.05-58.38-134.384-132.509-11.64-57.668-10.52-115.935 1.484-173.82z" id="path-1"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="146" height="146" viewBox="-10 -10 146 146">
<defs><pattern id="image-as_profile_widget-2" patternUnits="userSpaceOnUse" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"><image itemprop="photo" height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.gravatar.com/avatar/4a7131ab3b3fa22f2fea9fadaa018981?s=146"></image></pattern></defs>
<rect x="0" y="0" rx="4" ry="4" width="146" height="146" fill="url(#image-as_profile_widget-2)" stroke="#ffffff" stroke-width="0" stroke-opacity="1" id="path-1"></rect>

Related

svg noise not shown in firefox

Made up a cloudy svg background for my project.
It works perfectly in MS Edge,in Google Chrome, it even works when placed as desktop background in XFCE.
But it ain`t working in Firefox. Neither under Win, nor Linux.
Maybe there is some crutch needed?
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
<radialGradient id="Background" cx="50%" cy="50%" r="120%">
<stop offset="0%" stop-opacity="1" stop-color="#369" />
<stop offset="170%" stop-opacity="1" stop-color="#000"/>
</radialGradient>
<filter id="noise" x="0" y="0" width="100%" height="100%">
<feImage xlink:href="#bkgrad" result="image" x="0" y="0"/>
<feTurbulence baseFrequency="0.001" seed="999" type="fractalNoise" numOctaves="8" result="fnoise"/>
<feColorMatrix in="fnoise" result="snoise"
type="saturate"
values="0" />
<feBlend in="SourceGraphics" in2="snoise" mode="multiply"></feBlend>
<feBlend in="snoise" in2="image" mode="multiply"></feBlend>
</filter>
<polyline id="Hexagon" stroke="#000" stroke-opacity="0.15" fill="none" stroke-width = "1.2px"
points="0,0 8,0 12,6.9 8,13.8 0,13.8 8,13.8 12,6.9 20,6.9 24,13.8 20,6.9 24,0 32,0 "/>
<pattern id="Hex_Pattern" patternUnits="userSpaceOnUse" patternTransform="translate(0,0)"
width="24" height="13.8" >
<use xlink:href="#Hexagon"/>
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#Background)" id="bkgrad" ></rect>
<rect x="0" y="0" width="100%" height="100%" style="filter:url('#noise')" fill="url(#Background)"/>
<rect x="0" y="0" width="100%" height="100%" fill="url(#Hex_Pattern)" id="hexes"/>
</svg>

The attribute value for the <feBlend> filter is in="SourceGraphic", not in="SourceGraphics". Firefox did not render the whole filter because of that error, while other browsers and renderers used a fallback and used the last filter result as first source, effectively multiplying the result of feColorMatrix with itself. (This behavior is new in the CSS filter spec, it was not defined in SVG 1.1.)
Since the output of that part of the filter is never used anyway, remove it.
Additionally, as Robert Longson pointed out, feImage does not support references to internal fragments in Firefox. But you don't really need it. The referenced image is identical to the source graphic for the filter, so you can simply remove that primitive and reroute the input to the other primitives:
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
<radialGradient id="Background" cx="50%" cy="50%" r="120%">
<stop offset="0%" stop-opacity="1" stop-color="#369" />
<stop offset="170%" stop-opacity="1" stop-color="#000"/>
</radialGradient>
<filter id="noise" x="0" y="0" width="100%" height="100%">
<feTurbulence baseFrequency="0.001" seed="999" type="fractalNoise" numOctaves="8" result="fnoise"/>
<feColorMatrix in="fnoise" result="snoise"
type="saturate"
values="0" />
<feBlend in="snoise" in2="SourceGraphic" mode="multiply"></feBlend>
</filter>
<polyline id="Hexagon" stroke="#000" stroke-opacity="0.15" fill="none" stroke-width = "1.2px"
points="0,0 8,0 12,6.9 8,13.8 0,13.8 8,13.8 12,6.9 20,6.9 24,13.8 20,6.9 24,0 32,0 "/>
<pattern id="Hex_Pattern" patternUnits="userSpaceOnUse" patternTransform="translate(0,0)"
width="24" height="13.8" >
<use xlink:href="#Hexagon"/>
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" style="filter:url(#noise)" fill="url(#Background)"/>
<rect x="0" y="0" width="100%" height="100%" fill="url(#Hex_Pattern)" id="hexes"/>
</svg>

How to produce a hash (#) in a data URI in Firefox?

I have an SVG that includes a hash (#). Now, I want to use the SVG in an img data URI. However, Firefox will not show the image.
Here is a minimal example. The first img works fine while the second does not.
<img src='data:image/svg+xml;utf8,
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" height="100px" width="100px">
<text x="50" y="50">X</text>
</svg>' alt="" />
<img src='data:image/svg+xml;utf8,
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" height="100px" width="100px">
<text x="50" y="50">#</text>
</svg>' alt="" />
https://codepen.io/anon/pen/GdwmKZ
Works fine in Chrome and Edge.

SVG path : pattern fill not working in firefox and Safari

SVG path element not working in Firefox and Safari but it works in Chrome.
Why doesn't the path filled using pattern in Firefox and Safari?
<svg id="" xmlns="http://www.w3.org/2000/svg" height="500" width="600" style="position: absolute;">
<defs>
<pattern id="imgpattern" x="0" y="0" width="1" height="1" patternUnits="userSpaceOnUse">
<image width="600" xlink:href="https://i.pinimg.com/564x/e1/a5/b7/e1a5b7edacee456a4f3bc3e00c3c01d9.jpg"></image>
</pattern>
</defs>
<path d="M50,100 C50,100 100,100 100,50 L100,50 500,50 C500,50 500,100 550,100 L550,100 550,400 C550,400 500,400 500,450 L500,450 100,450 C100,450 100,400 50,400 L50,400 50,100 L50,100 0,100 0,0 0,425 L0,425 50,425 C50,425 75,425 75,450 L50,450 50,425 0,425 0,500 525,500 525,450 C525,450 525,425 550,425 L550,425 550,450 525,450 525,500 600,500 600,75 550,75 C550,75 525,75 525,50 L525,50 550,50 550,75 600,75 600,0 75,0 75,50 C75,50 75,75 50,75 L50,50 75,50 75,0 0,0 0,100" fill="#ff0000;" stroke="#F000" stroke-width="1px" style="fill:url(#imgpattern)"></path>
</svg>

There is no height attribute on the image. SVG 2 allows width/height to be omitted but only Blink has implemented this part of SVG 2 so far.
You also have a redundant fill on the rect (as you're applying a pattern fill as a style)
<svg id="" xmlns="http://www.w3.org/2000/svg" height="500" width="600" style="position: absolute;">
<defs>
<pattern id="imgpattern" x="0" y="0" width="1" height="1" patternUnits="userspaceOnUse">
<image width="600" height="600" xlink:href="https://i.pinimg.com/564x/e1/a5/b7/e1a5b7edacee456a4f3bc3e00c3c01d9.jpg"></image>
</pattern>
</defs>
<path d="M50,100 C50,100 100,100 100,50 L100,50 500,50 C500,50 500,100 550,100 L550,100 550,400 C550,400 500,400 500,450 L500,450 100,450 C100,450 100,400 50,400 L50,400 50,100 L50,100 0,100 0,0 0,425 L0,425 50,425 C50,425 75,425 75,450 L50,450 50,425 0,425 0,500 525,500 525,450 C525,450 525,425 550,425 L550,425 550,450 525,450 525,500 600,500 600,75 550,75 C550,75 525,75 525,50 L525,50 550,50 550,75 600,75 600,0 75,0 75,50 C75,50 75,75 50,75 L50,50 75,50 75,0 0,0 0,100" stroke="#F000" stroke-width="1px" style="fill:url(#imgpattern)"></path>
</svg>

Animate path loaded from external svg

When I define a simple path with an animation in a svg and use it immediately, everything works fine (see the following snippet)
<html>
<body>
<svg width='100%' height='100%' preserveAspectRatio="xMaxYMax">
<defs>
<symbol id="myloader" width="100%" height="100%" x="0px" y="0px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 80">
<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
<animateTransform attributeName="transform" attributeType="xml" dur="0.6s" from="0 25 25" repeatCount="indefinite" to="360 25 25" type="rotate"/>
</path>
</symbol>
</defs>
<use xlink:href="#myloader"></use>
</svg>
</body>
</html>
Now when I try to move this svg to an external file and load it from there, the svg is shown but the animation doesn't run.
loaders.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:xl="http://www.w3.org/1999/xlink" width="100%" height="100%" x="0px" y="0px" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 50 50;" version="1.1" viewBox="0 0 50 80">
<defs>
<symbol id="myloader" width="100%" height="100%" x="0px" y="0px" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 50 50;" viewBox="0 0 50 80">
<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
<animateTransform attributeName="transform" attributeType="xml" dur="0.6s" from="0 25 25" repeatCount="indefinite" to="360 25 25" type="rotate"/>
</path>
</symbol>
</defs>
</svg>
html
<html>
<body>
<svg width='100%' height='100%' preserveAspectRatio="xMaxYMax">
<use xlink:href="loaders.svg#myloader"></use>
</svg>
</body>
</html>
Is this expected behaviour or am I doing something wrong. I want the animation to run from the external resource too.

SVG strange behavior in IE10+

I'm using svg patterns to define custom background images for the fill attribute in svg's later in the page. I'm hiding the original svg and pattern definitions at the top of the page.
IE9 has no issues
IE10 doesn't show anything
IE11 working in fiddle, but in production only shows last one on page
Here is a stripped down example: http://jsfiddle.net/CCFWj/3/
<div style="height:0px; overflow:hidden">
<svg version="1.1" x="0px" y="0px" width="0" height="0" viewBox="0 0 140 155">
<defs>
<pattern id="oil-gas" patternUnits="userSpaceOnUse" width="186" height="206">
<image xlink:href="http://megastaging.com/erc/wp-content/uploads/2013/12/Oil_1-500x554-1390485365.jpg" x="0" y="0" width="186" height="206"></image>
</pattern>
<pattern id="marine" patternUnits="userSpaceOnUse" width="186" height="206">
<image xlink:href="http://megastaging.com/erc/wp-content/uploads/2014/01/Marine_Header-500x554-1390486195.jpg" x="0" y="0" width="186" height="206"></image>
</pattern>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="140px" height="154.046px" viewBox="0 0 140 154.046" enable-background="new 0 0 140 154.046" xml:space="preserve">
<path id="hex-140-155" d="M78.113,152.144c-4.431,2.531-11.684,2.537-16.118,0.016l-53.869-30.63c-4.434-2.522-8.067-8.718-8.071-13.769
L0,46.407c-0.004-5.051,3.617-11.252,8.047-13.782l53.81-30.724c4.43-2.529,11.684-2.536,16.118-0.014l53.867,30.628
c4.435,2.522,8.153,9.322,8.158,14.374l-0.031,60.748c0.005,5.051-3.615,11.253-8.046,13.783L78.113,152.144z"> </path>
</svg>
</div>
<svg class="image" viewBox="0 0 140 155" width="140px" height="155px">
<use xlink:href="#hex-140-155" fill="url(#oil-gas)"></use>
</svg>
<svg class="image" viewBox="0 0 140 155" width="140px" height="155px">
<use xlink:href="#hex-140-155" fill="url(#marine)"></use>
</svg>

The Microsoft SVG deviations are vague on the subject of the pattern element:
The display property affects pattern elements and references to those pattern elements
On the subject of xml:space:
The xml:space attribute is not supported in SVG.
So xml:space and pattern deviations may cause no side-effects in one version of IE, but several side-effects in another.
References
MS-SVG:2.1.16 [SVG11] Section 13.3, Patterns
MS-SVG:2.1.1 [SVG11] Section 5.10.2, The xml:lang and xml:space attributes

Resources