Can I disable image scaling filters within svg.

wildjo...@gmail.com

unread,

Jun 11, 2008, 3:41:14 PM6/11/08

to

I have an svg file with an embeded base-64 png image (see below dashed
line for its source) The png image is 5 pixels by 5 pixels and I am
trying to scale it up and have it remain visually pixelated. The idea
is that I'll use this to do surface plots where every row/column has a
specific color and each color corresponds to some value dependent on
that is being plotted. These plots will be similar to the one
depicted here (you can see the separate "boxes" when there are not too
many.: http://www.uta.edu/faculty/sawasthi/Statistics/popups/popup13.gif
I do not really want this image to be smoothed out as I want it very
clear which row and column is which color. Using svg rectangles is
out of the question because that gets way too huge way too fast (the
file would be huge, loading would take forever, a 100x100 version of
this froze firefox on my machine), most of our plots will have
hundreds or thousands of elements.

Inkscape renders this image as I'd expect, where I can clearly make
out the 25 boxes, but rsvg-view and firefox both smooth the image and
I cannot figure out how to turn them off. I've gone through a lot of
the svg specification to no avail. Below I have my attempt at
filter="none" that doesn't make a difference in my image. Does anyone
have any help or suggestions on fixing this? Is this a bug of
firefox's svg renderer? I can't seem to find any well defined answers
and I figure I would try here before jumping to adding a bug.

----------------------------------------
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<g transform="translate(0,792) scale(1,-1)">
<text x="306" y="54.6" transform="scale(1,-1) translate(0,-792)"
fill="#000000"
style="font-size:12pt;font-family:monospace;text-
anchor:middle;">
Bitmap Test -- (5x5)
</text>
<rect x="10" y="10" width="592" height="694.8" fill="none"
style="stroke:black;stroke-width:1pt;"/>
<image x="20" y="20" width="572" height="674.8" filter="none"
preserveAspectRatio="none"
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:show="embed"
xlink:href="data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAFtJREFUCB0BUACv/
wAAAAAAMwAAZgAAmQAAzAAAMwAAMzMAM2YAM5kAM8wAAGYAAGYzAGZmAGaZAGbMAACZAACZMwCZZgCZmQCZzAAAzAAAzDMAzGYAzJkAzMwAagIT7aig
+k0AAAAASUVORK5CYII"/>
</g>
</svg>

Robert Longson

unread,

Jun 11, 2008, 6:16:40 PM6/11/08

to

On Jun 11, 8:41 pm, "wildjoker...@gmail.com" <wildjoker...@gmail.com>
wrote:
...

> Inkscape renders this image as I'd expect, where I can clearly make
> out the 25 boxes, but rsvg-view and firefox both smooth the image and
> I cannot figure out how to turn them off. I've gone through a lot of
> the svg specification to no avail. Below I have my attempt at
> filter="none" that doesn't make a difference in my image. Does anyone
> have any help or suggestions on fixing this? Is this a bug of
> firefox's svg renderer? I can't seem to find any well defined answers
> and I figure I would try here before jumping to adding a bug.
>

I think renderers are free to scale images as they see fit so I don't
think this is a bug. The svg developers yahoo group is probably a
better forum for a generic how-to question like this. Maybe you could
use an feImage filter with a low filterRes to get what you want?

Best regards

Robert

wildjo...@gmail.com

unread,

Jun 11, 2008, 6:55:38 PM6/11/08

to

Thanks for the suggestion, I might try that too. I also created an
index.html page with simply the text <img src="test.png" width="500"
height="500"> and it scaled the PNG and left it pixelated, so I
figured the embedded PNG in SVG would follow the same conventions.

wildjo...@gmail.com

unread,

Jun 17, 2008, 10:09:38 AM6/17/08

to

Does firefox make use of the "image-rendering" property? I don't
notice a difference if it is set to optimizeSpeed or optimizeQuality.
I've found in Opera and Batik, the optimizeSpeed setting does nearest-
neighbor upscaling. Now it is not explicitly said to do this in the
specification, I'm just curious now if the code base actually has
different methods for the two settings.

----------------------------------------
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<g transform="translate(0,792) scale(1,-1)">
<text x="306" y="54.6" transform="scale(1,-1) translate(0,-792)"
fill="#000000"
style="font-size:12pt;font-family:monospace;text-
anchor:middle;">
Bitmap Test -- (5x5)
</text>
<rect x="10" y="10" width="592" height="694.8" fill="none"
style="stroke:black;stroke-width:1pt;"/>
<image x="20" y="20" width="572" height="674.8" filter="none"
preserveAspectRatio="none"
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:show="embed"

image-rendering="optimizeSpeed"

Robert Longson

unread,

Jun 17, 2008, 6:22:23 PM6/17/08

to

On Jun 17, 3:09 pm, "wildjoker...@gmail.com" <wildjoker...@gmail.com>
wrote:

> Does firefox make use of the "image-rendering" property?

I don't think so. But then image-rendering is only a hint. Even if we
implemented it, it might not do what you want.

Best regards

Robert