View source for Proposals/Zoom feature for media queries

← Proposals/Zoom feature for media queries
You do not have permission to edit this page, for the following reason:
The action you have requested is limited to users in one of the groups: Users, 106, 19480-chairs.
You can view and copy the source of this page.
__TOC__
====min/max-width/height properties in CSS Media Queries====
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution.<br />
The min/max-width/height properties are currently supported.<br />
The following sample works on existing browsers.

[https://dl.dropboxusercontent.com/u/15728628/svg/height/sub.svg '''sub.svg''']
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 100 100">
   <title>Simple SVG + mediaqueries</title>
   <defs>
   <style type="text/css">
     @media screen and (min-height: 100px) {
       #low {
         display: none;
       }
       #medium {
         display: inline;
       }
       #high {
         display: none;
       }
     }
     @media screen and (min-height: 200px) {
       #low {
         display: none;
       }
       #medium {
         display: none;
       }
       #high {
         display: inline;
       }
     }
   </style>
   </defs>
   <g id="low">
     <rect x="0" y="0" width="100" height="100" fill="red" />
     <text x="0" y="40" font-size="10">Low Resolution</text>
   </g>
   <g id="medium" display="none">
     <rect x="0" y="0" width="100" height="100" fill="green" />
     <text x="0" y="40" font-size="10">Medium Resolution</text>
   </g>
   <g id="high" display="none">
     <rect x="0" y="0" width="100" height="100" fill="blue" />
     <text x="0" y="40" font-size="10">High Resolution</text>
   </g>
   <text x="0" y="10" font-size="10">sub.svg</text>
 </svg>

[https://dl.dropboxusercontent.com/u/15728628/svg/height/image.svg '''image.svg''']
 <?xml version="1.0" encoding="utf-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <image xlink:href="sub.svg" x="0" y="0" width="75" height="75" />
   <image xlink:href="sub.svg" x="75" y="0" width="150" height="150" />
   <image xlink:href="sub.svg" x="225" y="0" width="300" height="300" />
 </svg>

'''Rendering result of image.svg'''
[[file:zf_image.svg.png|600px|thumb|none]]

====min/max-zoom property for CSS Media Queries====
In using min/max-width/height properties,<br />
if we want to control rendering of multiple elements according to resolution,<br />
the values of min/max-width/height properties should be set independently for all elements with different sizes.<br />
It is not intuitive to set the values of width/height.

It is intuitive and convenient for us to control rendering of multiple element by setting zoom ratio all at once.<br />
Therefore, we have introduced min/max-zoom property:<br />
<blockquote>
[http://www.w3.org/Graphics/SVG/WG/wiki/Proposals/IFrame_Like_Syntax#5.11.1_Additional_Media_features 5.11.1_Additional_Media_features]
'''Additional Values'''
<scale> is added.<br/>
<scale> is a value equivalent to the ratio of User Coordinate System for the Viewport Coordinate System. The exact definitions are as follows.
When the transformation between SVG user coordinate system and coordinate system of the viewport (CTM) is defined as:<br/>
[[File:PIFLS_Fzoom1.png]]<br/>
The <scale> is calculated as:<br/>
[[File:PIFLS_Fzoom2.png]]<br/>
</blockquote>

In this case, we can use 'class' attribute instead of 'id',<br />
and control rendering of multiple elements with different sizes at once.

Using the zoom feature, we can rewrite sub.svg as:<br />
(The following sample does not work on existing browsers.)

'''sub.svg'''
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 100 100">
   <title>Simple SVG + mediaqueries</title>
   <defs>
   <style type="text/css">
     @media screen and <strong>(min-zoom: 1)</strong> {
       .low {
         display: none;
       }
       .medium {
         display: inline;
       }
       .high {
         display: none;
       }
     }
     @media screen and <strong>(min-zoom: 2)</strong> {
       .low {
         display: none;
       }
       .medium {
         display: none;
       }
       .high {
         display: inline;
       }
     }
   </style>
   </defs>
   <g class="low">
     <rect x="0" y="0" width="100" height="100" fill="red" />
     <text x="0" y="40" font-size="10">Low Resolution</text>
   </g>
   <g class="medium" display="none">
     <rect x="0" y="0" width="100" height="100" fill="green" />
     <text x="0" y="40" font-size="10">Medium Resolution</text>
   </g>
   <g class="high" display="none">
     <rect x="0" y="0" width="100" height="100" fill="blue" />
     <text x="0" y="40" font-size="10">High Resolution</text>
   </g>
   <text x="0" y="10" font-size="10">sub.svg</text>
 </svg>

'''image.svg'''
 <?xml version="1.0" encoding="utf-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <image xlink:href="sub.svg" x="0" y="0" width="75" height="75" />
   <image xlink:href="sub.svg" x="75" y="0" width="150" height="150" />
   <image xlink:href="sub.svg" x="225" y="0" width="300" height="300" />
 </svg>

'''Rendering results of image.svg'''
[[file:zf_image.svg.png|600px|thumb|none]]
The scales of left, center, and right image are 0.75, 1.5, and 3.0, respectively.<br />
It should be the same as that of the previous version.

====Zoom ratio to display====
Scale introduced in the previous section is calculated according to the current transformation matrix (CTM),<br />
and not affected by the parent's CTM.<br />
In the following sample, the viewbox of image.svg is fixed (therefore, the CTM of sub.svg is also fixed),<br />
and the size of the browser's viewport is variable.

[https://dl.dropboxusercontent.com/u/15728628/svg/height_vary/image.svg '''image.svg''']
 <?xml version="1.0" encoding="utf-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" <strong>width="100%" viewBox="0 0 525 300"</strong>>
   <image xlink:href="sub.svg" x="0" y="0" width="75" height="75" />
   <image xlink:href="sub.svg" x="75" y="0" width="150" height="150" />
   <image xlink:href="sub.svg" x="225" y="0" width="300" height="300" />
 </svg>

'''Rendering result of image.svg with different sizes'''
[[file:zf_zoom.png|600px|thumb|none]]


From the view of Level of Details,<br />
we need an option to control rendering content according to zoom ratio to the browser,<br />
i.e. the CTM to the browser's coordinate system.

In our specifications and implementation of the zoom feature,<br />
if a value of zoom property is accompanied by absolute unit such as 'in',<br />
the CTM to the browser's coordinate system is used to calculate the scale value instead of ordinary CTM.

In the following example, absolute unit 'in' is used.<br />
Note that 1in = 90px.
[http://www.w3.org/TR/SVG/coords.html#Units 7.10 Units]

'''sub.svg'''
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 100 100">
   <title>Simple SVG + mediaqueries</title>
   <defs>
   <style type="text/css">
     @media screen and (<strong>min-zoom: 0.0111111in</strong>) {
       .low {
         display: none;
       }
       .medium {
         display: inline;
       }
       .high {
         display: none;
       }
     }
     @media screen and (<strong>min-zoom: 0.0222222in</strong>) {
       .low {
         display: none;
       }
       .medium {
         display: none;
       }
       .high {
         display: inline;
       }
     }
   </style>
   </defs>
   <g class="low">
     <rect x="0" y="0" width="100" height="100" fill="red" />
     <text x="0" y="40" font-size="10">Low Resolution</text>
   </g>
   <g class="medium" display="none">
     <rect x="0" y="0" width="100" height="100" fill="green" />
     <text x="0" y="40" font-size="10">Medium Resolution</text>
   </g>
   <g class="high" display="none">
     <rect x="0" y="0" width="100" height="100" fill="blue" />
     <text x="0" y="40" font-size="10">High Resolution</text>
   </g>
   <text x="0" y="10" font-size="10">sub.svg</text>
 </svg>

'''Rendering result of image.svg with different sizes'''
[[file:zf_zoom_abs.png|600px|thumb|none]]

LoD depending on zoom ratio to browser's viewprot is realized.
Return to Proposals/Zoom feature for media queries.
Retrieved from "https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Zoom_feature_for_media_queries"