Make card template and svg browser get colored SVGs instead of filtering them

This fixes the issue of SVGs being rasterized to 72DPI when printing

resources/cards/card.css

@@ -94,32 +94,12 @@ article figure img{
     height: 97%;
     margin: auto auto;
 }
-article figure img.svg{
+article figure img.svg_filter{
     filter:
         brightness(0)
         invert(1)
         opacity(0.5);
 }
-article figure div.svg {
-    display: block;
-    height: 97%;
-    width: 100%;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-    filter:
-        brightness(0)
-        invert(1)
-        opacity(0.5);  
-
-}
-article figure >svg {
-    height: 97%;
-    fill: #999;
-}
-article figure >svg * {
-    fill: #999;
-}
 article figure .mdi,
 article figure .fa,
 article figure .material-icons.figure {

resources/cards/card.vm

@@ -16,9 +16,8 @@
         <i class="fa fa-$escape_html($card.figure)"></i>
     #elseif($card.figure_source == "svg")
         <!--/cards/svg-->
-        <img class="svg" src="/svg/${escape_html($card.figure)}.svg">
-        <!--<div class="svg" style="background-image:url('/svg/${escape_html($card.figure)}.svg');"></div>-->
-        ## #include("${card.figure}.svg") **
+        <!--<img class="svg_filter" src="/svg/${escape_html($card.figure)}.svg">-->
+        <img src="/svg/${escape_html($card.figure)}.svg?color=999">
     #end
 #end
 #macro(specialFlags $card)

resources/cards/svg.css

@@ -34,7 +34,7 @@ img {
     margin: 0 auto;
     
     /*filter: invert(1) opacity(0.8);*/
-    filter: brightness(0) opacity(0.8);
+    /*filter: brightness(0) opacity(0.8);*/
 }
 
 body >h1,

resources/cards/svg.vm

@@ -67,7 +67,7 @@
 #foreach($name in $svgs)
     <li>
         <h1>$escape_html($name)</h1>
-        <img src="/svg/${escape_html($name)}.svg">
+        <img src="/svg/${escape_html($name)}.svg?color=333">
     </li>
 #end
 </ul>