Failures in parameterizing SVG images

Question

I am trying to create a list of simple images and would like to use vectors.

I have created a simple svg and read the w3c primer on parameters. As far as I can see, this is a draft. Right now My project is PHP based, but it may not be in the future. Therefore moving to GD is not feasible.

I tried

<object type="image/svg+xml" data="belt.svg">
   <param name="border" value="green" />
   <param name="color" value="white" />
</object>

AND

<object type="image/svg+xml" data="belt.svg?color=red"></object>

With no success. Any object I try to parameterize turns up invisible. And if I open it in Inkscape, the part of the image is not visible.

My secondary option is treating the svg as a template, and filling in the colours with a server side script, but I would like to avoid that.

The SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="10mm"
   height="18.531443mm"
   viewBox="0 0 10 18.531443"
   version="1.1"
   id="svg8"
   sodipodi:docname="belt.svg"
   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
  <defs
     id="defs2" >
       <ref id="paramBorder" param="border" default="black"/>
       <ref id="paramFill" param="color" default="green"/>
       <ref id="paramSnips" param="snips" default="white"/>
     </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="4"
     inkscape:cx="-105.07289"
     inkscape:cy="88.745915"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     showgrid="true"
     inkscape:window-width="1920"
     inkscape:window-height="1012"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1">
    <inkscape:grid
       type="xygrid"
       id="grid3713"
       originx="0"
       originy="-280" />
  </sodipodi:namedview>
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,1.531443)">
    <path
       style="stroke:none;stroke-width:0.26386964px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       fill="url(#paramBorder)"
       d="M 10,17 H 0 V -1.25625 h 10 z"
       id="beltBackground"
       inkscape:connector-curvature="0" />
    <path
       style="fill-opacity:1;stroke:none;stroke-width:0.25726196px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       fill="url(#paramBorder)"
       d="M 0,-1.531443 H 10 V 17 H 9.7500003 V -1.2667081 H 0.24999999 V 17 H 0 Z"
       id="beltBorder"
       inkscape:connector-curvature="0" />
  </g>
   <script xmlns="http://www.w3.org/2000/svg" type="text/ecmascript" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="ref.js"/>

</svg>

EDIT #1

I had overseen the script that had to be included. In the svg.

Referencing it with <script src="refs.js" type="text/javascript"></script> as the last element in my <svg> did not work. I ended up having to include it as demonstrated other places int SO

The result: now the border is no longer invisible, but only the default colors are shown.

EDIT #2

I noted that I had used a refs.js and not params.js as suggested in the comments. This caused everything to break. I peaked at the source of the Primer site and realized that my original incluce link was incorrect. it is now <script xmlns="http://www.w3.org/2000/svg" type="text/ecmascript" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="ref.js"/> which works beautifully, but still only with the default colors.

EDIT #3

I tried a different parameter, and now it appears to work (in Chrome, FF, Edge)

did you use/include the param.js polyfill in the first case? — Robert Longson, Oct 19 '19 at 21:15
I hadn't. I tried that now and inlcuded my findings in the question. — JoSSte, Oct 20 '19 at 05:05

JoSSte · Answer 1 · 2019-10-20T07:30:19.517

My experiments showed me that it was possible anyway. The newest version of the parameter library is most stable.

Trying to access the refs after the script library had set the values gave new issues. SO i copied a part of the script to access the values and act on them:

getNumSnips();
function getNumSnips() {
    var href = document.defaultView.location.href;
    if (-1 != href.indexOf("?")) {
        var paramList = href.split("?")[1].split(/&|;/);
        for (var p = 0, pLen = paramList.length; pLen > p; p++) {
            var eachParam = paramList[p];
            var valList = eachParam.split("=");
            var name = unescape(valList[0]);
            var value = unescape(valList[1]);
            console.log(name + ":" + value);

        }
    }

}

Failures in parameterizing SVG images

The SVG:

EDIT #1

EDIT #2

EDIT #3

1 Answers1