Limited SVG Manipulation in Dart

Tonight I hope to make use of Dart's built-in dart:svg library to clean up the code in my Polymer custom element.

The custom element in question, <x-pizza>, facilitates pizza buying by drawing (with SVG) the current state of to-be-purchased pizza:



Nearly every aspect of SVG has been a struggle for me, so I did not concern myself much with prettiness of code, although one cannot help oneself sometimes with Dart. Still, there are aspects that can be made better if I dig a little deeper into dart:svg

I notice that the graphical elements in dart:svg all have width, height, and href properties. So it sure would be nice to rewrite _svgImage() with that in mind. That is, this:

  _svgPepperoni()   => _svgImage('pepperoni');
  _svgSausage()     => _svgImage('sausage');
  _svgGreenPepper() => _svgImage('green_pepper');

  _svgImage(basename) {
    var svgImage = new ImageElement()
      ..setAttributeNS(
          'http://www.w3.org/1999/xlink',
          'href',
          '/packages/svg_example/images/$basename.svg'
        )
      ..setAttribute('width', '16')
      ..setAttribute('height', '16');

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

Would look better with svgImage being assigned as:

    var svgImage = new ImageElement()
      ..href = '/packages/svg_example/images/$basename.svg'
      ..width = '16'
      ..height = '16';

Sadly, that does not work. Upon closer examination, each of those properties is final in Dart. Huge bummer.

At least Dart makes it possible to set those properties with setAttribute() and setAttributeNS(), but it sure would be cleaner to be able to do so with proper setters. This does not bode well for dart:svg making SVG life easier. In fact most properties turn out to be final (e.g. translate, which sure should have helped).

If manipulating SVG is not going to be pretty in Dart, then perhaps loading it can be? I am currently starting a clean pizza via a combination of static <svg> tags in the Polymer template:

      <svg version="1.1"
        baseProfile="full"
        id="pizza-graphic"
        style="display: block; margin: 10px auto"
        width="300" height="300"
        xmlns="http://www.w3.org/2000/svg">
      </svg>

And a fresh slate that is drawn dynamically each time a topping is added to the pizza:

  _updateGraphic() {
    $['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" />
    ''';

    _addWholeToppings();
    _addFirstHalfToppings();
    _addSecondHalfToppings();
  }

If I save an SVG blank pizza image from Inkscape, I can load it with an HttpRequest:

  _updateGraphic() {
    HttpRequest.
      getString('/packages/svg_example/images/pizza.svg').
      then((svgContent){
        $['pizza'].innerHtml = '';
        svg = new SvgElement.svg(svgContent);
        $['pizza'].append(svg);
      });

    _addWholeToppings();
    _addFirstHalfToppings();
    _addSecondHalfToppings();
  }

That works just fine, but I am unsure that it improves things significantly in this case. Regardless, that seems like a useful trick to keep in my SVG toolbox (thanks to Emanuele Sabetta for the approach). If nothing else, it cuts down on static SVG coding, moving the definition into static files where it belongs. In more complex base SVG images, this approach would likely be a much more significant win.


Day #69

‹prev | My Chain | next›