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

On Tue, May 24, 2011 at 9:58 AM, Alan Gresley <alan@css-class.com> wrote:
> On 25/05/2011 2:42 AM, Tab Atkins Jr. wrote:
>> On Tue, May 24, 2011 at 7:24 AM, Brad Kemper<brad.kemper@gmail.com>
>>> This is also a question about background size. Suppose that with
>>> that same 400 x 400 raster image I have { background-image:
>>> image('400x400.png' 10dpi); background-size: 1in 1in; }? What are
>>> the final sizes of the rendered image pixels? 1/10" or 1/400"?
>>>
>>> Perhaps in both cases, you are just adjusting a sort of "late
>>> intrinsic" resolution that is then overridden by width and height
>>> declarations? If so, I think you need to say so. (Apologies, if you
>>> do somewhere already, and I just missed it.)
>>
>> I don't think it's clearly stated how this works, so I should fix
>> that.  The intent is that it affects the intrinsic size.
>>
>> So, in your first example (400x400 pixel image at 72dpi, sized to
>> 1in by 1in), you first apply the resolution.  This gives you a
>> native image size of 533px (or 5.55in), which is then scaled down to
>> 1in by 1in.  Your second example is similar, though more extreme
>> given the tiny dpi.
>
> 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.

~TJ

Received on Tuesday, 24 May 2011 17:24:11 UTC