From 9fd3d99b8fe1b2b890f96712f48e363323b08e7b Mon Sep 17 00:00:00 2001
From: Andreas Gohr <andi@splitbrain.org>
Date: Mon, 13 Feb 2017 16:19:43 +0100
Subject: [PATCH] directly embed SVGs for better styling

Now the SVGs are loaded via AJAX and are directly embedded into the
HTML. This allows for styling them via CSS and we can apply proper hover
styles.

The svg dispatcher was extended with an embed option (boolean parameter
'e') which will return an absolute minimum svg with absolutely no
styles.
---
 css/area_main-sidebar.less | 10 ++++++----
 js/sidebar.js              |  6 +-----
 svg.php                    | 31 +++++++++++++++++++++++++++++--
 3 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/css/area_main-sidebar.less b/css/area_main-sidebar.less
index ba9f779..52a03b0 100755
--- a/css/area_main-sidebar.less
+++ b/css/area_main-sidebar.less
@@ -35,10 +35,12 @@
                 margin-right: @margin-small;
                 color: @color-nav;
 
-                img {
+                svg {
                     width: @icon-size;
                     height: @icon-size;
-                    filter: grayscale(100%); //fixme maybe we could find a better way
+                    path {
+                        fill: @color-nav;
+                    }
                 }
             }
 
@@ -50,8 +52,8 @@
                 color: @button_background;
                 text-decoration: none;
 
-                span img {
-                    filter: none;
+                span svg path {
+                    fill: @button_background;
                 }
             }
         }
diff --git a/js/sidebar.js b/js/sidebar.js
index 16b9232..9279c1e 100644
--- a/js/sidebar.js
+++ b/js/sidebar.js
@@ -17,11 +17,7 @@ jQuery(function () {
             .text(text.substr(0, 1).toUpperCase() + text.substr(1, 1).toLowerCase());
         if (data[1]) {
             const src = data[1].trim();
-            const $svg = jQuery('<img>');
-            $svg.attr('src', DOKU_BASE + 'lib/tpl/sprintdoc/svg.php?svg='+src+'&f=__link__');
-            $svg.on('load', function () {
-                $icon.html($svg);
-            });
+            $icon.load(DOKU_BASE + 'lib/tpl/sprintdoc/svg.php?svg=' + src + '&e=1'); // directly embed
         }
 
         // make the new toggler
diff --git a/svg.php b/svg.php
index e2f8db9..f1c5d0a 100644
--- a/svg.php
+++ b/svg.php
@@ -129,12 +129,17 @@ class SVG {
         $params = $this->getParameters();
 
         header('Content-Type: image/svg+xml');
-        $cachekey = md5($file . serialize($params));
+        $cachekey = md5($file . serialize($params) . filemtime(__FILE__));
         $cache = new \cache($cachekey, '.svg');
         $cache->_event = 'SVG_CACHE';
 
         http_cached($cache->cache, $cache->useCache(array('files' => array($file, __FILE__))));
-        http_cached_finish($cache->cache, $this->generateSVG($file, $params));
+        if($params['e']) {
+            $content = $this->embedSVG($file);
+        } else {
+            $content = $this->generateSVG($file, $params);
+        }
+        http_cached_finish($cache->cache, $content);
     }
 
     /**
@@ -154,6 +159,26 @@ class SVG {
         return $xml->asXML();
     }
 
+    /**
+     * Return the absolute minimum path definition for direct embedding
+     *
+     * No styles will be applied. They have to be done in CSS
+     *
+     * @param string $file the SVG file to load
+     * @return string the new XML contents
+     */
+    protected function embedSVG($file) {
+        /** @var SvgNode $xml */
+        $xml = simplexml_load_file($file, SvgNode::class);
+
+        $def = hsc((string) $xml->path['d']);
+        $w = hsc($xml['width']);
+        $h = hsc($xml['height']);
+        $v = hsc($xml['viewBox']);
+
+        return "<svg width=\"$w\" height=\"$h\" viewBox=\"$v\"><path d=\"$def\" /></svg>";
+    }
+
     /**
      * Get the supported parameters from request
      *
@@ -163,6 +188,7 @@ class SVG {
         global $INPUT;
 
         $params = array(
+            'e' => $INPUT->bool('e', false),
             's' => $this->fixColor($INPUT->str('s')),
             'f' => $this->fixColor($INPUT->str('f')),
             'b' => $this->fixColor($INPUT->str('b')),
@@ -299,3 +325,4 @@ class SVG {
 $svg = new SVG();
 $svg->out();
 
+