Packaging Inkscape SVG for Polymer Custom Elements

Tonight I would like to switch over all of the SVG pizza toppings in the <x-pizza> Polymer custom element to individual SVG files. Using last night's approach to creating topping icons, I create a green pepper SVG in Inkscape:



As well as a sausage SVG:



I actually forget to delete the default layer in the first one, but a quick inspection of the SVG contents reveals the dead-giveaway of the <g> tag and I redo the image.

Inside the Polymer.dart code, I am still generating an SVG <image> to be added to the main SVG definition of the pizza crust and cheese. Since the only difference between the two new toppings and the previous implementation of the pepperoni topping will be the filename of the SVG icon, I have the opportunity for some code reuse:

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

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

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

Just like that, I see my new SVG images on the <x-pizza> custom pizza builder:



The green peppers should probably be slightly thicker, but that aside, it is pretty cool to be able to add my SVG images that quickly.

Before calling it a night, I need to address a warning that I get from Dart Pub's smoke-testing web server:

➜  dart git:(master) ✗ pub serve
Warning: Pub reserves paths containing "assets" for using assets from packages.
Please rename the directory "build/assets".
Loading source assets... 
Loading observe transformers... (3.8s)
Loading polymer transformers... (2.0s)
Serving svg_example web  on http://localhost:8080
Serving svg_example test on http://localhost:8081
Build completed successfully

It seems that the assets directory in Pub packages is going away. I heartily approve of this move as it was overly complex. But, for these SVG image assets to work when the <x-pizza> element is installed and used in other applications, I need to move these files. Instead of residing in assets, I need to move them into the lib directory. I opt to place CSS for my custom element into lib/styles and my SVG images into lib/images:

➜  dart git:(master) ✗ mkdir lib/styles
➜  dart git:(master) ✗ mkdir lib/images
➜  dart git:(master) ✗ mv asset/*.svg lib/images
➜  dart git:(master) ✗ mv asset/*.css lib/styles
➜  dart git:(master) ✗ rmdir asset 

The new location means that the images are now accessed from the /packages/<package_name>/images path, so I update the _svgImage() method accordingly for this svg_example package:

  _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);
  }

With that, I no longer have any warnings when I start the Pub web server:

➜  dart git:(master) ✗ pub serve        
Loading source assets... 
Loading observe transformers... (3.9s)
Loading polymer transformers... (1.9s)
Serving svg_example web  on http://localhost:8080
Serving svg_example test on http://localhost:8081
Build completed successfully

And everything continues to work as before.

I do believe that I am getting the hang of this SVG stuff in Inkscape. Up tomorrow, I plan to explore Dart's SVG facilities a little more.



Day #68

‹prev | My Chain | next›