Use inline SVG rulers

generator/css/cards.css

 }
 
 .ruler {
-    /*content: url(../img/ruler.svg);*/
-    width: 60mm;
-    height: 1.5mm;
+    width: 100%;
+    height: 1.0mm;
     margin-top: 0.5em;
     margin-bottom: 0.2em;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    background-image: url(../img/ruler2.svg);
 }

generator/css/icons.css

 .round-shield-transparent { background-image: url../img/round-shield-transparent.png;}
 .round-shield { background-image: url../img/round-shield.png;}
 .rss { background-image: url../img/rss.png;}
-.ruler { background-image: url../img/ruler.png;}
-.ruler.svg { background-image: url../img/ruler.svg.png;}
-.ruler2 { background-image: url../img/ruler2.png;}
-.ruler2.svg { background-image: url../img/ruler2.svg.png;}
 .run { background-image: url../img/run.png;}
 .rune-stone { background-image: url../img/rune-stone.png;}
 .rune-sword { background-image: url../img/rune-sword.png;}

generator/img/ruler.svg

-<svg height="5" width="375"  xmlns="http://www.w3.org/2000/svg">
-    <polyline points="0,0 375,2.5 0,5" fill="#600a15" stroke="#600a15"></polyline>
-</svg>

generator/img/ruler2.svg

-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="5"
-   width="375"
-   id="svg3006"
-   version="1.1"
-   inkscape:version="0.48.5 r10040"
-   sodipodi:docname="ruler2.svg"
-   inkscape:export-filename="C:\Users\chrissy\Documents\projects\dnd5e-cards\html\ruler.png"
-   inkscape:export-xdpi="900"
-   inkscape:export-ydpi="900">
-  <metadata
-     id="metadata3014">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs3012" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1440"
-     inkscape:window-height="837"
-     id="namedview3010"
-     showgrid="false"
-     inkscape:zoom="1.4219109"
-     inkscape:cx="255.12356"
-     inkscape:cy="-6.0999049"
-     inkscape:window-x="-8"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg3006" />
-  <path
-     style="fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:1.50940429999999990px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
-     d="M -12.40625 -29.9375 L -12.40625 40.96875 L 390.8125 40.96875 L 390.8125 -29.9375 L -12.40625 -29.9375 z M 0 0 L 375 2.5 L 0 5 L 0 0 z "
-     id="rect3016" />
-</svg>

generator/js/cards.js

+// ============================================================================
+// Card definition related functions
+// ============================================================================
+
+function card_data_color_front(card_data) {
+    return card_data.color_front || card_data.color || "black";
+}
+
+function card_data_color_back(card_data) {
+    return card_data.color_back || card_data.color || "black";
+}
+
+function card_data_icon_front(card_data) {
+    return card_data.icon_front || card_data.icon || "ace";
+}
+
+function card_data_icon_back(card_data) {
+    return card_data.icon_back || card_data.icon || "ace";
+}
+
 // ============================================================================
 // Card element generating functions
 // ============================================================================
 }
 
 function card_element_icon(card_data) {
-    var icon = card_data.icon_front || card_data.icon;
+    var icon = card_data_icon_front(card_data);
     var result = "";
     if (icon) {
         result += '<div class="title-icon-container">';
 }
 
 function card_element_ruler(params, card_data) {
-    return '<div class="ruler"></div>';
+    var color = card_data_color_front(card_data);
+    var fill = 'fill="' + color + '"';
+    var stroke = 'stroke="' + color + '"';
+
+    var result = "";
+    result += '<svg class="ruler" height="1" width="100" viewbox="0 0 100 1" preserveaspectratio="none" xmlns="http://www.w3.org/2000/svg">';
+    result += '    <polyline points="0,0 100,0.5 0,1" ' + fill + '></polyline>';
+    result += '</svg>';
+    return result;
 }
 
 function card_element_property(params, card_data) {
     rule: card_element_ruler,
     description: card_element_description,
     text: card_element_text,
-    fill: card_element_fill
+    fill: card_element_fill,
+    section: card_element_section
 };
 
 // ============================================================================
 }
 
 function card_generate_front(data) {
-    var color = data.color_front || data.color || "black";
+    var color = card_data_color_front(data);
     var style_color = card_generate_color_style(color);
-    var icon = data.icon_front || data.icon || "";
     var count = data.count || 1;
 
     var result = "";
 }
 
 function card_generate_back(data) {
-    var color = data.color_back || data.color || "black";
+    var color = card_data_color_back(data)
     var style_color = card_generate_color_style(color);
     var style_gradient = card_generate_color_gradient_style(color);
-    var icon = data.icon_back || data.icon || "ace";
+    var icon = card_data_icon_back(data);
     var count = data.count || 1;
 
     var result = "";