Combination with media queries on SVG Re: Comments about lazyload & postpone

Hi,

> I have been in discussions with some people trying to make SVG more 
> suitable for mapping where you load more detailed tiles as you zoom.

I supplement explanation of Mr. Brian.
Below is one of the samples of the contents.

================
root.svg:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
 <title>SVG + media queries with zoom feature + postpone</title>
 <defs>
 <style type="text/css">
   @media screen and (min-zoom: 1.5) {
     .low {
       display: none;
     }
     .medium {
       display: inline;
     }
     .high {
       display: none;
     }
   }
   @media screen and (min-zoom: 3) {
     .low {
       display: none;
     }
     .medium {
       display: none;
     }
     .high {
       display: inline;
     }
   }
 </style>
 </defs>
 
 <!-- low-res. tiles -->
 <image class="low" display="inline" href="low.svg" postpone x="0" y="0" width="100" height="100"/>
 
 <!-- lmedium-res. tiles -->
 <g class="medium" display="none">
  <image href="medium0_0.svg" postpone x="0"  y="0"  width="50" height="50"/>
  <image href="medium1_0.svg" postpone x="50" y="0"  width="50" height="50"/>
  <image href="medium0_1.svg" postpone x="0"  y="50" width="50" height="50"/>
  <image href="medium1_1.svg" postpone x="50" y="50" width="50" height="50"/>
 </g>
 
 <!-- high-res. tiles -->
 <g class="high" display="none">
  <iframe src="high0_0.svg" postpone x="0"  y="0"  width="50" height="50"/>
  <iframe src="high1_0.svg" postpone x="50" y="0"  width="50" height="50"/>
  <iframe src="high0_1.svg" postpone x="0"  y="50" width="50" height="50"/>
  <iframe src="high1_1.svg" postpone x="50" y="50" width="50" height="50"/>
 </g>
</svg>

================
high0_0.svg:   
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
 <image href="high0_0.svg" postpone x="0"   y="0"   width="25" height="25"/>
 <image href="high1_0.svg" postpone x="25"  y="0"   width="25" height="25"/>
 <image href="high0_1.svg" postpone x="0"   y="25"  width="25" height="25"/>
 <image href="high1_1.svg" postpone x="25"  y="25"  width="25" height="25"/>
</svg>

================
high1_0.svg:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="50 0 50 50">
 <image href="high2_0.svg" postpone x="50"  y="0"   width="25" height="25"/>
 <image href="high3_0.svg" postpone x="75"  y="0"   width="25" height="25"/>
 <image href="high2_1.svg" postpone x="50"  y="25"  width="25" height="25"/>
 <image href="high3_1.svg" postpone x="75"  y="25"  width="25" height="25"/>
</svg>

================
high0_1.svg:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 50 50 50">
 <image href="high0_2.svg" postpone x="0"   y="50"  width="25" height="25"/>
 <image href="high1_2.svg" postpone x="25"  y="50"  width="25" height="25"/>
 <image href="high0_3.svg" postpone x="0"   y="75"  width="25" height="25"/>
 <image href="high1_3.svg" postpone x="25"  y="75"  width="25" height="25"/>
</svg>

================
high1_1.svg:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="50 50 50 50">
 <image href="high2_2.svg" postpone x="50"  y="50"  width="25" height="25"/>
 <image href="high3_2.svg" postpone x="75"  y="50"  width="25" height="25"/>
 <image href="high2_3.svg" postpone x="50"  y="75"  width="25" height="25"/>
 <image href="high3_3.svg" postpone x="75"  y="75"  width="25" height="25"/>
</svg>

================

About these contents, UA will initially display only "low.svg" by media queries. Therefore, it is 
desirable for only "low.svg" to be loaded. However, each 'image' elements does not have display property,
 although 'g' element as ancestor of 'image' elements has display property. Therefore, if a group  has '
display' property, it is desirable to be handled postpone of the descendant elements.

Furthermore, if viewBox changed to '0,0,40,40' UA will display only medium0_0.svg.
In this case, it should become the condition of loading ; target element is in viewport and display 
property of its ancestor is not none.

How about modify like following?
postpone
This value indicates that the User Agent MUST not start downloading the resource associated with the 
element until both the bounding box of the element is inside the User Agent's interpretation of the 
Document's viewport, and the element or its ancestor has been styled such that its display property is no
 longer set to none. 

Regards,

Satoru Takagi



> (2013/09/26 14:12), Yoav Weiss wrote:
> > One more question:
> > * Will lazyload/postpone enable link element with a non-matching media
> > attribute to avoid being loaded altogether?
> 
> I have been in discussions with some people trying to make SVG more 
> suitable for mapping where you load more detailed tiles as you zoom. The 
> tiles are represented by iframes that recursively include other iframes.
> 
> They are currently investigating the following approach:
> 
> * Add a 'zoom' media query (details to be fleshed out but basically 
> 'width' and 'resolution' alone aren't sufficient)
> * Allow using iframe elements directly in SVG (i.e. without wrapping in 
> foreignObject)
> * Add a media attribute to iframe elements (necessary?)
> 
> The final step would then be to allow the postpone attribute to indicate 
> those zoomed-in tiles needn't be loaded initially if the zoom-level 
> doesn't match (but at the same time allowing UAs to pre-fetch tiles 
> whose zoom level is "close" to provide smoother zooming).
> 
> To that end perhaps the description of 'postpone' needs to be expanded 
> beyond just bounding box / display:none?
> 
> What do you think?
> 
> Best regards,
> 
> Brian

Received on Monday, 30 September 2013 09:19:30 UTC