Javascript not an option?

[ChrisGitIt]

Hi,

i just wonder if using javascript within the svg is not an option? Instead of creating SVGs for all images your can use just one SVG to clowncar dynamically. For example the embedded SVG in html could look like this:

<object data="object/dynamic.svg?img=my-image"><!-- IE fix stuff ... --></object>

and the SVG would look like this (quick mock up):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet">
  <title>Clown Car Technique</title>

  <style>
    svg {
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  </style>
    <script type="application/ecmascript">
<![CDATA[

// get the GET Parameter from the request url string
function getQueryParameter(name){
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");  
  var regexS = "[\\?&]"+name+"=([^&#]*)";  
  var regex = new RegExp( regexS );  
  var results = regex.exec( window.location.href ); 
  return results ? results[1] : "";
}

// set the background image
function setBackgroundImage(size) {
  this.document.firstChild.setAttribute("style", "background-image: url('../"+getQueryParameter('img')+"/"+size+".png')");
}

// default size
var size = 'huge';

// media queries equivalent?
if(this.innerWidth < 400) {
  size = 'small';
} else if(this.innerWidth < 700) {
  size = 'medium';
} else if(this.innerWidth < 1000) {
  size = 'big';
}
// read ...
setBackgroundImage(size);

]]>
    </script>
</svg>

I haven't tested the browser caching possibility for "dynamic.svg" to not be loaded over and over again. Beside that, a minified (and zipped?) version is less than one KB ...

By the way: the image set (from small to large image) is within the folder "my-image".

The reload while resizing the browser window could be done via JS event "window.onresize" or something like this.

Greets Chris

[estelle]

The goal of the technique is to be a viable responsive solution for . is presenation. javascript is behavior. We can already replace the src with JavaScript, so might as well use js to write the correct path for the right size image. CCT aims to find a non-JS solution.

[knightdr]

@ChrisGitIt @estelle

Would something like this(http://www.w3.org/TR/2009/WD-SVGParamPrimer-20090430/#URLAndObjectParameters) get closer to what you are looking for.

I don't know that it would set the path within the style block but worth a look perhaps.