The problem
I'm trying to crop two images to some triangle shape via clippath, but when I try to move the inline svg code to an external file, only the fp clippath applies to the image. The image with the sp path disappears completely.
Please note that I'm using Firefox and therefore cannot use pure css and the clip-path: polygon() style.
The SVG code
<svg xmlns="http://www.w3.org/2000/svg" height="0" width="0">
<defs>
<clipPath id="fp">
<polygon points="0 0, 100 0, 0 100"/>
</clipPath>
<clippath id="sp">
<polygon points="100 0, 100 100, 0 100"/>
</clippath>
</defs>
</svg>
The working fiddle
This fiddle works because it's inline SVG. Try to move it to a separate file and refer to it in the css. It won't work.
https://jsfiddle.net/qkqovjmq/4/
I solved it by using the jQuery clip path plugin which renders all clip paths correctly.
Related
Our small (16px), circular icons suddenly degraded in quality on chrome with no change to our code or assets. The svgs look fine on a macbook screen, but blur on a monitor. Current running theory is a chrome update, but am looking for possible solutions/fixes. Any information or advice welcome.
example of blurry edges on an icon
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M50,0a50,50,0,1,0,50,50A50,50,0,0,0,50,0Zm0,91.6667A41.6667,41.6667,0,1,1,91.6667,50,41.6668,41.6668,0,0,1,50,91.6667Z"/>
<g>
<circle cx="49.2659" cy="75.9917" r="5.7828" fill="#6d6e71"/>
<path d="M53.7632,63.0029H43.85c0-10.0845,5.03-15.1208,9.0712-19.1674,3.326-3.33,5.5236-5.5311,5.5236-10.2049,0-6.4239-6.9209-6.6089-7.71-6.6089-.3743,0-9.1787.0818-9.1787,7.16H31.642c0-11.2085,9.6047-17.0731,19.0922-17.0731,11.57,0,17.6239,8.3117,17.6239,16.5224,0,8.7764-4.6706,13.4524-8.4225,17.21C56.3524,54.4287,53.7632,57.0211,53.7632,63.0029Z" fill="#6d6e71"/>
</g>
</svg>
I have created this Instagram icon in Illustrator. I am trying to get it to display properly on an HTML page but it's not working properly. After exporting the svg image I copy the svg code generated by Illustrator into my HTML and it scales funny; cutting out some edges and making the strokes much thicker. It appears to be independent of parent element.
Scaling the svg using its height and width property or transform doesn't do anything and the viewBox dimensions match that of the image. Check out the screenshots.
Generated svg code:
<svg viewBox="0 0 22 22">
<g id="Shape">
<path class="cls-1" d="M16,22.2H6.41A6.21,6.21,0,0,1,.2,16V6.41A6.22,6.22,0,0,1,6.41.2H16a6.21,6.21,0,0,1,6.2,6.21V16A6.21,6.21,0,0,1,16,22.2ZM6.41,2.2A4.22,4.22,0,0,0,2.2,6.41V16a4.21,4.21,0,0,0,4.21,4.2H16A4.2,4.2,0,0,0,20.2,16V6.41A4.21,4.21,0,0,0,16,2.2Z"/>
<path class="cls-1" d="M11.2,17A5.78,5.78,0,1,1,17,11.2,5.79,5.79,0,0,1,11.2,17Zm0-9.56A3.78,3.78,0,1,0,15,11.2,3.79,3.79,0,0,0,11.2,7.42Z"/>
<circle class="cls-1" cx="17" cy="5.14" r="1.25"/>
</g>
</svg>
How it looks in the browser:
SVG Clipping vs. Masking
I recently came across clipping and masking in SVG. I noticed that the <mask> element includes every feature of the <clipPath> element.
In addition, <clipPath> has many disadvantages:
lower browser compatibility
no transparency allowed
no structural, gradient or image elements allowed
Because of this I wonder what the <clipPath> element is for:
The <mask> element is much more powerful!
That is my code:
<svg viewBox="0 0 100 100" width="100" height="100">
<defs>
<clipPath id="clip">
<rect x="0" y="0" width="50" height="50"/>
</clipPath>
</defs>
<circle cx="50" cy="50" r="50" fill="grey" clip-path="url(#clip)"/>
</svg>
Finally, my questions:
Should I use <mask> instead of <clipPath> in my code snippet?
Is there any situation when <clipPath> is more suitable than <mask>?
I have tried to use svg image as background-image in css. And I have faced with strange behavior. Element that has svg background has strange transparent line around.
In the example below it is shown as line between the first and the second div. Size of the line changes depending on width of the element.
http://jsfiddle.net/mahnunchik/g1ux4e7o/
Screenshot from jsfiddle:
It reproduces at least in Chrome 37 and FF 32 on Windows and Linux
Svg image is quite simple:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 76" enable-background="new 0 0 1920 76">
<path fill="#DE4943" d="M0 76L1921 0 0 0z"/>
</svg>
Any idea how to fix that? Or how to explain that?
Try adding preserveAspectRatio="none" to your <svg> element.
Also you don't need the enable-background attribute.
Try to add stroke-width="0" to the path
Trying to make compatible all svg's images in different browsers I have an issue with Firefox.
I am using a .SVG image in an element img. Something like that:
<img src="image.svg" />
If you can see the image below,seems that the SVG is repeated. If I will used the svg as background-image, problably I will can do background-repeat: no-repeat, but in this case I need use the svg at img element and can't specify background-repeat to an element img.
How I can fix this? All answers will be apreciate.
I'm going to explane this strange case..
This is the code of my SVG
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="21.391px" height="18.881px" viewBox="228.645 224.748 21.391 18.881" enable-background="new 228.645 224.748 21.391 18.881" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">
<g>
<path fill="#CEE4C4" d="M243.708,230.977c-3.494,0-6.328,2.83-6.328,6.323c0,3.494,2.834,6.328,6.328,6.328 c3.496,0,6.328-2.834,6.328-6.326C250.036,233.808,247.204,230.977,243.708,230.977z M244.437,242.177h-1.508v-1.805h1.508V242.177 z M244.308,239.066h-1.24l-0.129-5.723h1.498L244.308,239.066z"/>
<g>
<path fill="#9FAEB1" d="M237.384,237.376c0-0.024-0.004-0.051-0.004-0.076c0-0.627,0.096-1.229,0.266-1.803l-3,2.25v-3h-4v-8h12 v4.324c0.347-0.059,0.699-0.096,1.062-0.096c0.318,0,0.63,0.031,0.938,0.076v-6.305h-16v12h4v4L237.384,237.376z"/>
</g>
</g>
</svg>
The element SVG measures are 21x19 px.
BUT! the measure of the element SVG inside are 22x20 px.
So, if i put the measures of svg (21x19) that don't fix the initial problem, however if i put width and height of the element (22x20) solves the problem.
Ok i see what's your problem now. You should try to add for img tag the exact width and hight of the image you try to add, just to ensure it will display the expected dimension. Try it and see what happens, if not please make a jsfiddle to can help you