Is there a way to make the SVG version of an image not being cropped on windows resize?
You can try resizing the windows here:
http://demosthenes.info/blog/532/Convert-Images-To-Black--White-With-CSS
or
http://www.read-design.co.uk/css3-grey-scale-image-filters/
Note that the grayscale version of the image is not the same size as the color one when windows is smaller which is the SVG is cropped on smaller windows.
But those with JS seems to scale well:
http://james.padolsey.com/demos/grayscale/
Unfortunately, whenever possible, I am trying to avoid JS, and prefer simpler SVG file with some CSS.
I am trying to digest:
https://developer.mozilla.org/en/CSS/Scaling_of_SVG_backgrounds
But that is not what I need.
I need two states of images: color and greyscale as discussed here, only want the SVG to properly scale, if possible:
Convert an image to grayscale in HTML/CSS
But unfortunately the greyscale is cropped, not properly scaled.
I tried adding "vector-effect="non-scaling-stroke", to no use.
Anyone knows a resolution this issue?
Thanks
UPDATE:
I think I just noticed my own issue properly. It is not about the SVG version being smaller, but the SVG version is being cropped on resize. I have to update my whole question above as well.
The issue only happened when resizing is by pressing Ctrl + Mouse scroll.
I don't think its an issue, unless somebody suggest anything.
Related
I am going through my image files and replacing them with svg, from png. The problem is that now, when I scale up or zoom in on mobile for example, the images look worse than they did with png.
As I understand, SVG is scalable vector graphics, so you should be able to scale them as big as you like without distortion.
Well, the images have been converted from png to svg so should, in theory, look better, mostly when scaled up.
You can see an example here of png background image at https://adsler.co.uk/jobs and svg here https://adsler.co.uk/dating/
You will see that in jobs (png) the image scales quite high before distortion but in dating (svg) it zooms only a bit before it distorts, whereas it should be the other way around.
So what am I doing wrong and how to fix please? Basically I just want crystal clear images across my site.
On further further inspection, in Chrome this is most definitely the case, but in Firefox, on mobile, it scales quite high before distortion.
Two points then come up.
Why is it distorting at all? It should be infinitely scalable.
When I zoom in on an svg in Firefox, does any distortion occur simply because my mobile phone reaches the peak of its display capacity?
The problem you're running into is that while this image is technically an SVG, the fact that it started as a PNG and was converted has left it as a png image wrapper in an svg, rather than a true vector.
If you open it up in a text editor you can see that the whole content inside the <svg> wrapper is an image attribute <image id="image0" width="2160" height="3840" x="0" y="0" xlink:href="... etc.
What this means is that it will essentially behave in the same way as a raster image rather than a vector graphic.
I'd advise trying to recreate the graphic as a vector using something like Illustrator, Sketch or Inkscape. Do you have the image saved in anything other than a png format?
I am looking for a image library with React. What I want to do is that there is a fixed editor and I can move and resize the image behind the editor and if the image in the editor is what I want, then I get fixed image's baseUrl. I found a few libraries, but those are only giving cropped function not moving or resizing image. I hope to find out cropped image library plus that can move or resize image.
Check out https://www.npmjs.com/package/react-avatar-editor
Sounds like what you're describing, including the base64 export.
There is a lot of packages around, the most recommended one is react-avatar-image-cropper.
Have a look at it: https://www.npmjs.com/package/react-avatar-image-cropper
Google Chrome always seems to be changing the color of an image that I'm trying to match to a background color. I tried saving it in Photoshop and GIMP and even adjusted the color settings in each but it doesn't help in Chrome. FF and IE work fine (for once).
The color of my image is #282828. After I saved it as a PNG, I reopened it in both GIMP and Photoshop and used the eyedropper tool to confirm that the color was still #282828. When it renders in Chrome it's darker. I have a div with a background color of #282828, and the image is right next to it. I took a screen shot and the div's background color was #282828 and the images background color was #1d1d1d. I tried this for several different colors and each has had the same result. I even tried making the source image the color Chrome was rendering it as but Chrome still changes it. So for example, since Chrome was changing #282828 to #1d1d1d, I made the source image #1d1d1d, and when I rendered it in Chrome it was not #1d1d1d, but some other darker color.
At this point, I'm looking for either a fix or a programmatic work-around. Because the image is transparent, has curves, and a drop-shadow, there's really no way for me to avoid replacing the it, or even parts of it, with html.
Update:
I also tried saving it as a jpg and gif. gif actually works but can't preserve the drop shadow. The image I'm using is attached. If I take a screenshot of this in Chrome, GIMP's eyedropper tool says it's #1d1d1d. If I open the original and do the same, it's #282828.
PNG uses gamma correction to try to ensure that the image looks kinda the same across all monitors, and this can cause color mismatches like the one you're seeing. It's a combination of image editor issues and browser issues: image editors are not forced to embed gamma data inside images, and browsers are free to ignore the gamma correction if it's there and free to enforce some at random when it's not there. In this case, I'd rather think that Firefox ignores it.
Use a transparent PNG if you don't want its background to interfere with your page's background.
[EDIT] For your specific case, you may be able to replicate the graphics you're looking for by styling elements, using border-radius and box-shadow, two widely-implemented CSS3 properties that reasonably decay on older browsers.
I'd like to use zoom property in CSS for images but would not like to have a blurry effect to enlarged images but rather pixelated. How can I achieve this?
edit: if neccesary, it is ok to use other properties or other languages.
You cannot (currently) use upscaling and specify that the browser should use nearest-neighbor zooming, neither with HTML images, upsized HTML5 canvases, using drawImage() on a canvas to draw the image larger, nor zooming up images on SVG.
Here's a solution (written for this related question) showing how to 'zoom' an image using nearest-neighbor pixelation by re-creating the image as rectangles in SVG: http://phrogz.net/tmp/canvas_image_zoom_svg.xhtml
Here's another solution showing how to achieve this same effect using HTML5 Canvas (drawing rectangles on the canvas for the zoom):
http://phrogz.net/tmp/canvas_image_zoom.html
You might want to try a lightweight jQuery plugin called Zoomoz. The settings include easing and native animation too.
I have an zoomable image in the website. When the image is zoomed out to a large extend it appears very SHARP and ugly.
I tried using image-rendering : opimizequality, optimizespeed CSS but did not work.
Is there any other way out.
Thanks
According to image-rendering on MDC, image-rendering is currently only supported in Firefox 3.6. A similar property, -ms-interpolation-mode, is available for IE7 and IE8. Other browsers don't seem to have this feature (yet).
As latze mentioned, your best bet is to edit the image itself, scaling it to the level you need. I'm not sure, but you may try using <canvas> to perform the interpolation you desire.
I would simply edit the picture instead of the CSS.
Try making the picture slightly larger step by step while you make sure the picture doesn't (as we call it in danish, not sure if it correct english) "pixelate".
This can be done in various image editing programs from The Gimp-shop to Photoshop.
Images aren't meant to be resized that much. Think about an image as a graph where each pixel is a single square in the graph. If you stretch the image out, you're essentially making the pixels stretch out. Some programs try to fill in these pixels with what they think would fit there, others just make the pixel bigger, and others just fill in the surrounding areas with the same pixels to give it a sort of glowish effect. Resizing images down, while it tends to work better, also creates the same effect, because you're just chopping off pixels instead of adding them. Most programs that I've seen will squish pixels together, combining whichever colors were in those pixels. If you have a high detail image, then chopping off pixels is going to make it look horrible. There are no really safe ways to determine which pixels need to be retained to keep the overall image in tact. Most websites that have zoom features have a much larger image which has been resized down and they let you zoom to view the details of the larger image. Some even get separate images of the massive detailed one and the smaller preview one.