Re: Controlling content based on resolution

Sorry if I haven't been clear so far.  I am thinking about the two
different use cases:

1. SVG in a web page
2. Standalone SVG used to define an application icon

If, for example, I have an element in the icon that I want to appear only
if the final size of the icon is greater than 32x32.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
   <style type="text/css">
   <![CDATA[
      @media (max-height: 32px) {
         .greater-than-32 {
            display: none;
         }
      }
   ]]>
   </style>

   <circle cx="50" cy="50" r="40" fill="orange"/>
   <rect x="50" y="50" width="40" height="40" fill="green"
class="greater-than-32"/>

</svg>

If you try this in a browser (Chrome and FF worked), the green rectangle
disappears when the browser window height drops below 32px. Ok good, but
this behaviour is dependent on the browser height.  What if I want this
behaviour when I set the SVG to 16x16?:

   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="16"
height="16">...</svg>

If you try this, you'll see that the 16x16 SVG has the rectangle until the
window height drops below 32px.

So my questions are:

   1. Is it reasonable for a standalone (ie. non-browser) renderer to use
the output size of the SVG as the @media width/height determinant?

   2. Should there be a way to specify svg height rather than browser
window height in an in-browser context?  There is currently, 'height' and
'device-height'.  Is there a case for 'element-height'?  Eg. @media
(max-element-height: 32px).  I feel sure that web authors would love to
have the ability like this to control the way their web icons look based on
how they are used on the page.


Paul




On 20 August 2014 03:48, Jeremie Patonnier <jeremie.patonnier@gmail.com>
wrote:

>
> 2014-08-19 17:18 GMT+02:00 Paul LeBeau <paul.lebeau@gmail.com>:
>
> > Per the spec there is no limitation to the usage of CSS Media Queries
>> with SVG
>>
>> Yeah, I guess I was more asking whether it was clear to implementers
>> whether something like max-width referred to the SVG width or the page
>> width.  In the spec, the definition of 'width' is:
>>
>>     The ‘width’ media feature describes the width of the *targeted
>> display area of the output device*.
>>
>> Would it be reasonable to interpret references to width in SVG CSS media
>> queries refer to the width of the SVG?
>>
>
> No, it's perfectly clear that the area of the output device has nothing in
> common with the size of the SVG image itself. However, there are rules to
> define the intrinsic size of the SVG image based on the size of that
> display area and the various attributs define on the top most <svg> element
> of any SVG document. If I remember well, it's something that has been
> discussed a few month ago to make sure all browsers will behave the same
> (it was not 100% the case at the time and I'm not sure it's already
> harmonized)
>
>
>> If not, does there need to be a different property for SVG use?
>>
>
> What exactly do you want to achieve? What use case are you talking about
> exactly? Do you have some examples?
>
> --
> Jeremie
> .............................
> Web : http://jeremie.patonnier.net
> Twitter : @JeremiePat <http://twitter.com/JeremiePat>
>