My SVG image is pixel perfect, and all browsers render it OK, except FireFox.
Example 1 (Bootstrap markup):
https://codepen.io/anon/pen/gdVxJo
There are just two rectangles in Bootstrap columns. All the rectangles has pixel-aligned borders and border width=2px but FireFox adds antialiasing.
I guess it depends of area height, but do not know why. There is example with one rectangle without any CSS.
Example 2 (clean HTML):
https://codepen.io/anon/pen/OoKxEd
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="396" height="100">
<rect x="0" y="0" width="396" height="100" fill="none" stroke="#000" stroke-width="2"></rect>
</svg>
</body>
You maybe need to change height of your render area on CodePen to reproduce the bug.
Anybody knows is it possible to force FireFox to draw lines correctly?
Related
I am using Flaticon font library, which is really useful, since you can include svg images via the i tag and change their color and size via css.
Flaticon Font Documentation: https://www.flaticon.com/iconfonts
For some reason their svg icons are bigger than needed and have invisible space between them.
If I want to have a perfect design, I have to use margin with negative values, which is pretty annoying.
Is there something that I can do inline in order to make the size of the i element the same as the icon vector without the invisible space?
Update:
It seems like the spacing is intentional: https://gyazo.com/90f1b8f986bea7a00e8efeea52c24cdd
SVG icons normally have some whitespace around them. On of the reasons is because sometimes icons have to have different physical sizes in order to look optically similar in size.
Consider this square and a circle.
<svg viewBox="0 0 200 100" width="400">
<rect x="20" y="20" width="60" height="60" fill="grey"/>
<circle cx="150" cy="50" r="30" fill="grey"/>
</svg>
Note how they are the same phical size, but the circle does not have the same "physical presence" as the square.
But if we make the circle a little bigger, they now look better. They appear to match in size despite being physically different sizes.
<svg viewBox="0 0 200 100" width="400">
<rect x="20" y="20" width="60" height="60" fill="grey"/>
<circle cx="150" cy="50" r="35" fill="grey"/>
</svg>
How to adjust the padding
Most SVG icons have a viewBox attribute that tells the renderer what the important area of the SVG is. The renderer needs to know which area of the SVG canvas to scale up or down when you make an SVG bigger or smaller.
I don't know for sure that the Flaticon ones have a viewBox. But I'm going to assume that they do.
You can alter the padding in your icons by adjusting the viewBox dimensions. Contracting the viewBox in towards the icon shape will reduce the padding. But consequently it will make the icon appear bigger if you don't also reduce the display size of the SVG (ie the width and height of the SVG - or it's container).
Unfortunately you cannot alter the viewBox attribute via CSS. So you will have to edit the actual SVG file.
You can read more about the viewBox attribute in the SVG Specification. If that's hard to follow, you will be able to find other good viewBox tutorials. Here is a good one by Sara Soueidan.
Note: The reason I included the first section of this answer was to explain why the padding was there, and why it is useful. If you do alter your icons by reducing the viewBox, my recommendation would be to try and make the same change on all icons. Otherwise they may end up looking like they are all different sizes.
I'm struggling with one of my SVGs where for now I'm just filling it with a solid grey rect. The rect fills fine vertically, but horizontally it's not filling the full space:
Here's a snippet from my html:
<div class="col-9 sh-input">
<svg viewBox="0 0 1000 100" width="100%" height="40px">
<rect x="0" y="0" width="1000" height="100" fill="#333"/>
</svg>
</div>
To get the rect to actually fill the entire view, currently I need to change x to ~-100 & width to ~1200.
I've been through all stylings to see if anything there could be the cause, but no luck, and I'm not doing any custom styling on svgs at the moment. Also, as a long shot, since the svg width is defined in percent & height in pixels, I wondered if that could be a factor, but changing the svg width="475px" is still producing the same result.
So I'm a little stumped at the moment, especially since I've used almost this exact code in other parts of my application without the same issues. If anyone can point out what dumb mistake I'm making I'll be eternally grateful!
I'm having rect inside svg and rect is filled with some pattern. This pattern is just png image. Zooming this rect work fantastic in FireFox, Safari etc, but not in Chrome and Chromium. Chrome is making this image a little bit blurry. I was searching for similiar problems, but i need svg, rect, pattern to be 100% width and height... it is they need to be 100% of container size and not some fixed size. I created fiddle to see the effect: http://jsfiddle.net/j5gfjnpd/2/
<div style="width: 100vw; height: 100vh">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<defs>
<pattern id="floor" viewBox="0 0 3508 4962" width="100%" height="100%" patternContentUnits="objectBoundingBox" preserveAspectRatio="xMidYMid meet">
<image id="test" width="3508" height="4962" preserveAspectRatio="xMinYMin meet"></image>
</pattern>
</defs>
<g id="mapZoom">
<rect width="100%" height="100%" fill="url(#floor)">
</rect>
</g>
</g>
</svg>
</div>
To see this effect you have to zoom-scroll the image and search for some small captions. In Chrome they are blurried and in FireFox they are really clean and nice.
Is there some fix to this, because i'm losing my head trying to fix this. I will be really happy to see some help. Thanks in advance
My best guess is that the zoom is being done on the GPU by Chrome, in which case, it's not re-rasterizing the jpg, it's just doing pixel interpolation when it scales the asset. AFAIK, there is no reliable way to kick Chrome to re-rasterize, but you can try doing it by adding a transition/animation that can't be performed on the GPU (something that's not a scale/skew/position transform or opacity).
I'm using an SVG inside of an HTML document, and using an external SVG file inside of said SVG. Like so:
<svg class="ipachart" width="500" height="350" viewBox="0 0 500 350" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- In Firefox 38.0.5, the svg does not scale to fit the SVG. While it's fine in Chrome. -->
<image x="0" y="0" width="100%" height="100%" xlink:href="https://www.dropbox.com/s/gtindax1177ewmx/Blank_vowel_trapezoid.svg?dl=1" />
<!-- Using a PNG, it scales just fine in Firefox -->
<!-- <image x="0" y="0" width="100%" height="100%" xlink:href="https://www.dropbox.com/s/w0i764blf4tbc4z/Blank_vowel_trapezoid.png?dl=1" /> -->
</svg>
JSfiddle
This works fine in Chrome and Safari. (I do not care for IE.)
The problem is that the SVG image does not scale to fit in Firefox (version 38.0.5). Instead of looking like this:
It looks like this (as if it wasn't scaling at all):
If I use a PNG version in place of the SVG, it works like expected. Which makes me think it's a bug.
Should I file a bug report?
No. Because it looks to me like Firefox has the correct behaviour here.
The SVG you are linking to ("Blank_vowel_trapezoid.svg") has no viewBox attribute, so it should not / will not be scaled to fit your <img> bounds.
If anything you should file bugs against Chrome and IE.
If you want tthe SVG to scale. Add a viewBox to its root <svg> tag:
viewBox="0 0 1000 700"
and remove the width and height attributes.
So, i've been trying to make a portfolio page and i want to use custom shapes. So instead of use divs, i'm using a svg polygon shape to have the background img. Note, this is the first time i deal with svg and i'm trying to fix it the whole day.
So basically, the problem is, the border on the left-bottom and on the top-right is cutting out the edge of my shpe. I tried to reduce the the width/height of the polygon but it's not working properly. It stays to small or cut even more making it a swuare shape..
This is my html code and also a working jsfiddle: http://jsfiddle.net/1rmd2otz/1/
<div class="sv-img">
<svg class="svg" viewBox="0 0 910 500" >
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="900" height="490">
<image xlink:href="img/service/website.jpg" x="0" y="0" width="890" height="480" />
</pattern>
</defs>
<polygon points="96.729,27.124 0,490.109 867.032,420.878 900,0" fill="url(#img1)"/>
</svg>
</div>
So, can anyone help me?
Okay I see a couple of things wrong. Let's start with the first and work through it.
For a start, your polygon is 900x490, but you are specifying a pattern with dimensions of 890x480. So that's part of the reason why you are getting "trimmed" corners - your pattern isn't extending the full width and height of the polygon.
If we fix that, we get almost there. I've added a red line to show the polygon outline more clearly.
Here's a demo.
It is still not quite right. There are still little gaps at the top and bottom. The reason for this is because the aspect ratio of your polygon/pattern (900/490 ~= 1.84) is not the same as the aspect ratio of your image (570/300 = 1.9). What the renderer is doing is scaling the 500x370 image up to fit inside the dimensions you specify for your <image>, whilst keeping the same aspect ratio. That results in an image that is 900 x 473.7 (473.7 = 900/1.9), centred vertically in your 900x490 pattern. That's leaving roughly 6 pixels at the top and bottom.
There are a few ways to fix that. Obviously one would be to change either the image or the polygon so their aspect ratios match exactly.
Another way to fix this is to change the way the image gets scaled. By default, the image gets scaled up to fit the width and height you specify, but doesn't go outside those dimensions. This means that sometimes a gap will be left - like we are seeing. You can change it to a different scaling mode which tells it to scale to fit the maximum dimension leaving no gaps. You do that by setting preserveAspectRatio="xMidYMid slice" on the image.
<image xlink:href="[...snip...]"
x="0" y="0" width="900" height="490" preserveAspectRatio="xMidYMid slice"/>
Here's a demo of that.
You can see that the polygon is completely filled now.
You can read more about preserveAspectRatio here.
It looks like your issue is in the polygon points. Change ...
<polygon points="96.729,27.124 0,490.109 867.032,420.878 900,0" fill="url(#img1)"/>
To ...
<polygon points="96.729,27.124 10,470.109 867.032,420.878 890,10" fill="url(#img1)"/>
jsFiddle: http://jsfiddle.net/rfornal/1rmd2otz/3/
This may not be EXACTLY what you want, but should get you moving in the right direction. You MIGHT be able to do this on the other side and change the SVG viewBox values (widen them).