0

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.

Community
  • 1
  • 1
swan
  • 2,509
  • 3
  • 24
  • 40
  • I don't see anything cropping or changing when I visit either of those URLs and resize the window using Safari 5 on OS X. – Phrogz Jun 19 '12 at 22:42
  • I replied myself with the way it can reproduce. Downvoter please read UPDATES. We don't always know answers, sometimes on the process the light come into sight. – swan Jun 21 '12 at 13:10

1 Answers1

0

The issue only happened when resizing is by pressing Ctrl + Mouse scroll. I don't think its an issue, unless somebody suggest anything.

swan
  • 2,509
  • 3
  • 24
  • 40