Is there a way to force Firefox to use color management on a website via CSS or any other means?
Most browsers use color management to render images and CSS in sRGB by default. With Firefox, you need to manually enable color management. I build websites, and colors are vastly different on Firefox. I'd like a consistent, predictable rendering such that Firefox renders the same as all other browsers without requiring the user to change their about:config.
More info on this website
Relevant excerpt:
Firefox 67.0.0 at least, it doesn’t color manage CSS colors. It just renders CSS colors in the monitor’s color profile. This results in CSS colors blowing out into over-saturated reds and greens when viewed on wide-gamut monitors. Firefox does support full web color management, including rendering CSS colors in sRGB and honoring ICC v4 color profiles, but it must be manually enabled using the following steps.
TL;DR: Is it possible to load other images based on media-query from svg included via img tag?
I generate a bunch of svg files with have tables with text and icons inside. A PDF would be semantically a better container, but I need to keep such "documents" as images for seamless embed/preview and it probably won't solve my problem. So the story is about icons.
I wrote inline styles with media queries picking icons corresponding to user's screen DPI. Icons are already bundled into sprites, so I use pattern/image[xlink:href] + fill:url(#id). Everything works as needed when I embed svg directly into HTML (DOM islands). But if I embed svg via img tag (i.e. <img src="foo.svg">), it doesn't load icons at all, let alone showing them.
I understand, that I can embed icons via data-URL, but embedding icons for all supported screen dpis seems too much. The irony is that icons are raster ones, hardly vectorizable pixel-art, so I cannot have one set of icons for all DPIs.
Is there a way to have proper icons picked by media query w/o embedding them all?
You can't load external files from an SVG used in an <img> tag (or used in other "image" contexts, like CSS background images). For security and performance reasons, SVG used as image has to behave like any other image -- a single file, no secondary resources and no scripts.
If you don't want to use inline SVG, you might consider embedding an SVG file with an <object> tag or <iframe>. However, I recommend that you actually test carefully to see whether browsers are downloading the image files even if they aren't using them because of CSS.
So since it's not possible to load conditionally: either embed or not, I should do some clever detection about raster sets. Technically not a direct answer, but in case someone needs.
I decided to go with cookies. People visit normally the same site that hosts those SVG.
I'd set a cookie for their DPI and then all SVGs served would pick proper DPI images.
For people who haven't visited the site yet, I'd go with UA sniffing: mobiles and macs get 2x, others 1x. Or just 1x for everyone.
Created a font-icons with material svg and custom svg files using gulp-iconfont-css. Sometimes these font-icons are not appearing with the correct icon they are actually jumbled and on refresh, all icons are arranged properly on the site.
why is it happening like this and how to solve this?
I've been using icon-fonts created at IcoMoon and they are fantastic. For this I import an SVG Illistrator output (or use premade icons) and create font files that are attached using CSS #Font-Face. These are only ever one color.
I've been reading about SVG Sprites like here: http://css-tricks.com/svg-sprites-use-better-icon-fonts/
I've tried uploading illistrator SVG files with different colors into IcoMoon (as explained at the bottom of the link above) and then creating a SVG Sprite but the color never comes through (always just one color).
Am I doing something wrong with IcoMoon? How can I create a color SVG Sprite using a site like IcoMoon that can be used to display icons where required?
thankyou
Note: i need multiple colors in each image. (not just one color styled via CSS).
I want to create my own node icons for jsTree application. A jsTree sample could be found here
I want to know what specification the new icon has to have
size
transparent?
could you recommend any program (mac or pc)
anything else I forgot
Bit of a weird question, but anyway:
The icons are individually 16x16.
All the icons are inside one .png using alpha transparency (the background).
The CSS Sprites technique is being utilized:
http://static.jstree.com/v.1.0pre/themes/default/d.png
Which image editor to use?
I'd use Photoshop, but any image editor that can handle .png's alpha transparency will work.
Try: https://superuser.com/questions/25451/looking-for-a-good-free-image-editor