Re: [css3-images] What does image-resolution apply to?

On 25/05/2011 3:38 AM, Brad Kemper wrote:
> On May 24, 2011, at 10:23 AM, "Tab Atkins Jr."<jackalmage@gmail.com>
>> On Tue, May 24, 2011 at 9:58 AM, Alan Gresley<alan@css-class.com>
>>> On 25/05/2011 2:42 AM, Tab Atkins Jr. wrote:


>>> What happens with a SVG background-image that has no intrinsic
>>> size or no dimension?
>>>
>>> background-image: image('basic.svg' 50dpi)
>>
>> For vector images, the "dot" in dpi is pixels in the outermost
>> coordinate space.  So, that declaration simply means that the
>> SVG's initial coordinate space is such that 1px in it is equal to
>> 1/50th of an inch.
>>
>> In other words, if the SVG image had something like "<svg
>> width='100' height='100'>" as the root element, then it would be
>> scaled to be a 2in by 2in square.  Without that resolution
>> declaration, the image would be just over 1in square instead.
>
> Are SVG lengths alway unitless numbers? If not, I would expect an SVG
> measured in inches to be pixelated if given a low enough resolution
> (which might occasionally be a useful effect).  Forgive my ignorance
> of SVG, please.


Excused. I was myself was ignorant about the wonders of SVG. The first 
rule with a SVG is they don't pixelate.

Try these three test.

<!doctype html>
<style type="text/css">
html {
   background: white 
url(http://css-class.com/test/svg/ellipse/intrinsic-none.svg);
   min-height:100%;
}
</style>



<!doctype html>
<style type="text/css">
html {
   background: white url(http://css-class.com/test/svg/example2.svg);
   min-height:100%;
}
</style>



<!doctype html>
<style type="text/css">
html {
   background: white url(http://css-class.com/test/svg/example2.svg);
   background-size: 100% 100%;
   min-height:100%;
}
</style>


Information about both images:

  example2.svg

    width="100" (100px)
    height="100" (100px)
    (all other x and y coordinates are in pixels)
    file size - 877 bytes


  intrinsic-none.svg

    width - defaults to 100% width of the viewport
    width - defaults to 100% height of the viewport
    (all other x and y coordinates are in percentages)
    file size - 455 bytes


You can make some stunning PNG graphics but when they start to exceed 
100kbs (to avoid pixelization), you become hesitant in using them for a 
background image. The alternative is to make a SVG (with some 
complexity) and be very surprised that an SVG exceeding 5kbs is a rarity.



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Wednesday, 25 May 2011 03:40:57 UTC