Creating Color Layers for Plotting Using Beautiful Soup to Decompose Inkscape SVG Elements and Using Axidraw Hatch Fill Inkscape Extension

DigitalPeople1_BYR

I liked the output I am getting with the perl script to make DigitalPeople drawings but I want to experiment with adding various colors to the rectangles and separate them from the outline drawing.  I will need to create a separate SVG for each color "layer" I want to plot.  Within Inkscape I can manually select elements and I could cut and paste in place them into new layers but since my SVG file is composed of about 400 features that could get pretty tedious to split them up manually.  I wanted a way to do this programatically.  As SVG files are text files that are in XML format, the XML can be parsed to keep certain elements that are desired.  Specifically, I want to parse my Inkscape SVG file to split it into an outline file that I will draw with black ink, and rectangle files that I will fill with different colors.    I learned of a great library called Beautiful Soup (https://beautiful-soup-4.readthedocs.io/en/latest/#), it seems to be popular for scraping web pages, but has many other uses e.g. it can be used to parse XML with lxml.

I am starting with this SVG appearance in Inkscape:

I used a script parse_keeppolygons.py to generate an svg with only the polygon elements which represent the outlines (the following script removes the rect elements):

from bs4 import BeautifulSoup

import re

with open("composite1_nosquares.svg") as fp:

        soup = BeautifulSoup(fp, "lxml-xml")

        for tag in soup.find_all(re.compile("")):

                if tag.name == 'rect':

                        tag.decompose()

print(soup)

This gives me a file like this in Inkscape:

I decided to arbitrarily divide the rect elements into 3 groups with the plan for each group to be a given color. I created a variation on the above script to remove polygons and then keep one out of threee of the rects in order that they appear in my svg called parse_keeprect0.py : 

from bs4 import BeautifulSoup

import re

rect_count = 0

with open("composite1_nosquares.svg") as fp:

        soup = BeautifulSoup(fp, "lxml-xml")

        for tag in soup.find_all(re.compile("")):

                if tag.name == 'polygon':

                        tag.decompose()

        for tag in soup.find_all(re.compile("")):

                if tag.name == 'rect':

                        if rect_count == 1:

                                tag.decompose()

                        if rect_count == 2:

                                tag.decompose()

                        rect_count = rect_count + 1

                        if rect_count == 3:

                                rect_count = 0

print(soup)

This gives me an SVG file like this when opened up in Inkscape:

I made two more variations of this to keep the other two groups of rect elements, e.g. parse_keeprect1.py would give me the next group of rects with keeping one out of three.

    The next challenge is to fill the rect elements.  If this was going to be printed out with an inkjet printer the the fill attribute could be used to color the squares, but since I want to plot the artwork, I need to create paths to fill the interior of the rects.

    I looked into how to create the paths to fill an enclosed svg element and I discovered that Evil Mad Scientists Laboratory (EMSL) has already created an Inkscape extension for hatching that is amazing and will fill all enclosed paths with hatching at a user defined angle and density (thank you for making this available EMSL!).  

 I opened my rect element only SVG's and used the EMSL Inkscape extension Hatch fill to create paths to fill in the rectangle outlines.

This gives me an output like this in Inkscape:

The next step is to generate gcode for each of the four SVG files (outline file of polygons and three rect element files), which I used juicy-gcode to accomplish, then send them via Octoprint to my plotter.  I originally only purchased black Staedtliner fine tip pens, but I purchased another set that contains many colors.  I picked some color combinations that seem pleasing together and created some different plots.

The first plot I made with bright yellow, red and deep blue "DigitalPeople1_color_BYR" which is at the top, it has a couple of lines across because I didn't set the pen quite high enough.

I made a couple more DigitalPeople1 plots with some other color combinations,  they each have different emotional energies.

DigitalPeople1_GPB

DigitalPeople1_CYG

Then I applied the same process to DigitalPeople2 and DigitalPeople3.

DigitalPeople2_CYR

DigitalPeople3_CYR

Here is a link to a YouTube video showing the final outline being drawn on DigitalPeople2_CYR plot:

Plotting the Outlines of DigitalPeople2

 Disclaimer

The author does not make any warranties about the completeness, reliability and accuracy of this information. Any action you take upon the information on this site is strictly at your own risk, and the author will not be held liable for any losses and damages in connection with the use of this information.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.