I know that historically .ico and .png favicons have always had to be square (have equal width and height – e.g. 16x16, 32x32, 64x64), and even if your actual favicon picture didn't have equal width and height, you still had to put it inside a square template, so to speak, or else browsers would distort the image; like so:
However, when it comes to SVG favicons, this doesn't seem to be case. Even if the viewBox of your <svg> element has different width and height, browsers keep the aspect ratio intact when showing the favicon, unlike what they do to raster favicons:
So, it sure seems like the old "square rule" for favicons doesn't actually apply to the SVG ones, but I've seen a number of articles casually stating that even SVG favicons should be a square:
Be sure that the SVG image is square. Here
Actually, if the logo of the company already exists as a square SVG image, you can use it as is. Here
(emphasis mine)
Which is confusing to me. I'm curious whether or not this is true, do SVG favicons actually need to have a square viewBox? Or are these little hints in these articles just misguided and mistaken? Is there any evidence suggesting that even SVG favicons must be square?
Related
I have converted a badge/image from PNG to SVG in order to be able to re-use the asset in various sizes etc.
The problem is that depending on the specific webpage i'm embedding the SVG on, it either looks super crisp (as intended) or looks bad with some sort of anti-aliasing gone horribly wrong.
Even on the pages where the SVG looks crisp after load, I only have to scroll the page a bit until it looks horrible as well.
Please look at the screenshots below to see the exact difference on the BADGE (SVG):
It seems the browser only messes with the SVG right where the SVG meets the image behind it. The SVG is only slightly transparent in the gray center, so that should not be the cause of it.
I have tested in Chrome, Edge, Safari which all do the same thing.
Does anybody know what might be the cause of this?
I found a fix to what clearly seems to be a somehow undiscovered big bug in all modern browsers in regards to handling SVG through CSS as a background on an element overlapping another element with background/image.
The fix for my case was simply adding a background-color to the element. Since the element is completely round I can simply make a border-radius as well, so the background will never appear.
If the element however was not a complete round circle, this would not be a workable fix.
I exported the code for four inline SVGs via Sketch, with the same stroke-width and color, but one SVG behaves erratically across browsers & within browsers on Codepen.
Codepen Example
-All SVGs have a stroke-width of '2', however, the twitter svg requires a stroke-width of '4' to get the same effect (Applies to Chrome, Firefox & Safari)
-All SVGs are the same color via stroke="#999999":
My project viewed directly via Chrome & Firefox: the twitter svg stroke is the correct color
Codepen Example on Chrome & Firefox: the twitter icon is noticeably brighter, stroke appears as #c2c2c2
Personal Project & Codepen Example on Safari: twitter svg stroke is rendered as #c2c2c2 on both Codepen & my personal project
The 'Solution'...
By changing fill="#999999" to fill="#fff" in the twitter svg's 'rect' tag, the svg is displayed normally in Safari. Chrome & Firefox, which both rendered the correct color without this 'fix', are unaffected.
This fix works for Safari in my codepen example & when viewed from source. However, Chrome & Firefox don't render the codepen example correctly, with or without this fix applied, while both render the twitter svg correctly from source, fix or no fix.
My solution works for now, but I don't understand why it works. Any insight is much appreciated!
<rect x="29.984127" y="0.716535433" width="24.5015702" height="20.6298476" fill="#fff"></rect>
If you want a set of <svg> elements to look similarly when given the same stroke width, you need to make sure their viewbox-es are equal. In your example, each viewbox gets scaled in order to fit the provided width and height.
For example, in Illustrator (which is what I use) the "Artboard" matches the viewbox. So whenever I set out to create a set of icons for a web project, the first thing I do is make sure all their artboards are equally sized. In fact, I usually export all from the same artboard containing each icon in a different layer.
I'm sure you can achieve the same in Sketch. If not, find any other tool that allows you to modify the viewbox of your <svg>s so they match.
As a side note, you might want to take a look at the vast array of icon-font online editors and creators, (Glypther, Icomoon, Fontello, ...) but it's not guaranteed to solve your problem. They do automatically resize and center your icons and some allow you to adjust/fiddle with that before saving the font but, personally, I have never tried to add <svg>s with different viebox-es into the same set.
Whether or not the problem will persist depends on how the importing is done. If they unify the viewbox sizes across icons on import, scaling the icon to fit, it will fix your problem. But that doesn't mean any of the above mentioned tools do it. They should, imho.
I have no clue what happened, I created an svg image in illustrator, saved it, posted it to my wordpress site, and everything was good to go.
((Its upposed to show under the text box on this page.
I resized the screen, the image disappeared, and now no matter what i do, it will not show.
Furthermore, The problem appears to be limited to Chrome, Ive tried creating multiple other svg images, and none of them will show at all on chrome whereas all of them work on other web browsers.
I've also added code to my htaccess, still no luck. i knew that wouldn't work because ive posted svg's to my wordpress site before with no problem...
my illustrator settings are as follows:
svg profiles: svg 1.1
fonts type: convert to outline
image location: embed
advanced options - css properties: Presentation Attributes
Decimal places: 5, unicode 8
-responsive box checked
///////
Here's a google docs link to the svg code
SVG CODE - Google Docs
EDIT** Now the images aren't showing up in any browsers, i haven't changed anything.
If you examine the <img> element in your browser dev tools you'll see the problem. The browser is sizing the <img> for the SVG at (0 x 0).
Here's the relevant HTML from your page:
<img src="https://makerstrunk.com/wp-content/uploads/2015/04/coursetrunksample1.svg"
class="mpc-transition attachment-full" alt="coursetrunksample1">
You haven't sepcified a width and height here. But you have for the PNG versions of the image you have included on the page. Normally, in HTML, images default to the natural/intrinsic size of the bitmap. But SVGs don't always have those values. And yours doesn't. Check the contents of the SVG. You'll see it has no width or height.
If you add width and height to your <img> tag, all will be well.
<img src="https://makerstrunk.com/wp-content/uploads/2015/04/coursetrunksample1.svg"
class="mpc-transition attachment-full" alt="coursetrunksample1"
width="300" height="250">
Let's say I have an image with actual size of 200x200 pixels. I insert it into a HTML page like this:
<img src="some.jpg" width="50" height="50">
Suppose there's no CSS styling for this image.
Will it be displayed consistently across all browsers and devices like a 50x50 image? Are there any exceptions?
This style is supported among all of the major browsers (IE, Firefox, Opera, Safari, and Chrome)
Keep in mind that when doing this, the user is still forced to download the full size image before it is rendered in the size you specified! If it is a particularly large image, it may be wise to downscale it with an image editor before you upload it.
The user is still receiving the original file but the browser is altering it through its respective rendering methods.
The only exceptions to this rule, and this isn't necessarily due to browser rendering but may be helpful to keep in mind, is that HTML 5 no longer allows for you to adjust by percentage -- you can only adjust by pixels (as you already are)
In my html page, I include an image as
<img src="http://i44.tinypic.com/w2o9kh.png" border="0" alt="Image by TinyPic">
I style it from an external css by
img {width:2em;height:2em; }
However I notice that the image quality deteriorates when same image is used more than once in a page.
Compare http://jsfiddle.net/aJ333/50/ and http://jsfiddle.net/zxgQr/ in firefox. The quality of smiley is worse in the first one.
Any insight on why this happens and how to retain the quality ?
P.S. Ive checked this happens even if images are in different div containers.
P.S. This seems to be browser specific:
In chrome both are good quality
In IE9 both are bad quality
In firefox quality of smiley is worse in the first fiddle.
I would like this to work in firefox at least.
Im novice in html so please bear with in case this is obvious
You are setting a height and a width value on your images. If those values are bigger or smaller than the actual dimensions of the picture, the browser must scale it. This process changes the resolution of the picture making it look somewhat blurry.