Improved (slightly) Inkscape SVG Workflow

OK, let's have another go at Inkscape SVG and Polymer. I continue to attempt two things: to figure out Inkscape and to decide how best to get its SVG into a dynamic Polymer element. Thanks to some tips last night from Emanuele Sabetta, I may have a better handle on how to go about doing the former (and possibly the latter).

In this case, I am trying to make my <x-pizza> custom element a little prettier:



As I did last night, I start by drawing a pepperoni in Inkscape:



I am not concerning myself with pretty just yet, only work flow. So, following Emanuele's advice, I next open File / Document Properties:



After expanding Resize page to content…, I have



And, after clicking the Resize to page to drawing or selection button, the dimensions of my SVG “pepperoni” have changed to:



After saving this document as plain SVG (not Inkscape SVG), I have:

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="126.84375"
   height="129.71875"
  <g
     transform="translate(-55.15625,-41.78125)">
    <path
       d="m 180,106.6479 a 61.42857,62.857143 0 1 1 -122.857143,0 61.42857,62.857143 0 1 1 122.857143,0 z"
       style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
  </g>
</svg>

(some metadata is omitted for brevity)

I begin to suspect (and this suspicion is reinforced by the tutorial to which Emanuele linked) that I would be better off saving these SVGs as files rather than trying to translate them into dynamic JavaScript. But I stick with the dynamic version again tonight mostly because I want to see if it works. The dynamic SVG is thus:

  _svgPepperoni: function() {
    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute('width', '126.84375');
    svg.setAttribute('height', '129.71875');

    var group = document.createElementNS("http://www.w3.org/2000/svg", "g");
    group.setAttribute('transform', 'translate(-55.15625,-41.78125)');

    var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    path.setAttribute('d', 'm 180,106.6479 a 61.42857,62.857143 0 1 1 -122.857143,0 61.42857,62.857143 0 1 1 122.857143,0 z');
    path.setAttribute('style', 'fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none');
    group.appendChild(path);
    svg.appendChild(group);

    return svg;
  },

With that, I get a slightly improved:



All of my pepperoni occupy the same space. I am trying to set the location of the toppings randomly with the cx and cy properties, but that has no effect on grouped elements, which my Inkscape produced SVG is.

Up tomorrow I will try to determine how to position these icons on my canvas. If nothing else, the snap.svg JavaScript library looks promising, but hopefully I can figure it out on my own first before falling back to a library. But for tonight, I feel like I am finally starting to understand Inkscape—mostly thanks to Emanuele!

Update: Move the SVG “pepperonis” turns out to be fairly easy. I first add them to their own <g> group elements, which can be transformed/translated:



I still think it wise to switch to SVG files instead of dynamically creating them, but that I will leave until tomorrow.


Day #65

‹prev | My Chain | next›