SVG as Images in Polymer.dart

I am dynamically generating the SVG in my <x-pizza> pizza-building Polymer. And for the life of me, I don't know why. But it may have been a lucky guess.

For my fist pass, the shapes were all circles:



The pizza was effectively inlined in the Polymer element's shadow DOM with a bit of JavaScript:

  _updateGraphic: function() {
    this.$['pizza-graphic'].innerHTML = '' +
      '<circle cx="150" cy="150" r="150" fill="tan" />' +
      '<circle cx="150" cy="150" r="140" fill="darkred" />' +
      '<circle cx="150" cy="150" r="135" fill="lightyellow" />';

    this._addWholeToppings();
    this._addFirstHalfToppings();
    this._addSecondHalfToppings();
  },

For now, I am going to leave that in place in my custom element. Instead, I will concentrate on loading an external SVG file for the toppings and adding them to the SVG.

I thought I had the hang of saving SVG from Inkscape, but when I create a 10x10 pixel pepperoni, set the document properties so that the page is 10x10 as well and save:



I always get a matrix transform in the resulting plain (not Inkscape formatted) SVG file:

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="10"
   height="10">
  <g transform="translate(0,-1042.3622)">
    <path
       d="m 239.99999,318.07648 a 34.285713,37.142857 0 1 1 -68.57142,0 34.285713,37.142857 0 1 1 68.57142,0 z"
       transform="matrix(0.14380379,0,0,0.13275542,-24.582993,1005.1358)"
       style="fill:#d40000;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
  </g>
</svg>

This may not be a huge deal—this is vector graphic manipulation, after all. Still, I bothers me that my SVG is being translated -1042.3622 pixels and then run through that transform matrix. Heh, I realize that I trying to get pixel perfection in a scalable vector graphic, which is just silly. So I press on for now (but I will revisit at some point).

Anyhow, I copy said pepperoni.svg into my Polymer library's asset directory, then try to use it in my Dart code thusly:

  _svgPepperoni() {
    var svgImage = new ImageElement(src: '/assets/svg_example/pepperoni.svg');
    return new GElement()
      ..append(svgImage);
  }

Which does not work at all—there is no matching constructor. Eventually, I realize that ImageElement is different than an <img> element. In order to load an SVG as an image, I need the XLINK namespace, which requires the setAttributeNS method:

  _svgPepperoni() {
    var svgImage = new ImageElement()
      ..setAttributeNS('http://www.w3.org/1999/xlink', 'href', '/assets/svg_example/pepperoni.svg')
      // ..setAttribute('href', '/assets/svg_example/pepperoni.svg')
      ..setAttribute('width', '10')
      ..setAttribute('height', '10');

    return new GElement()
      ..append(svgImage);
  }

(the commented out, non-namespace version does not work)

That's pretty ugly, but it works:



Ugh. This SVG stuff sure is a pain. I am unsure if Dart has any facilities for making this easier. The current approach is very much a JavaScript-y approach and it feels like it. It is hacky and of the barely-holding-duct-tape variety. Still, it does work, which is a start.


Day #66

‹prev | My Chain | next›