Merge pull request #110 from tomasklaen/presentation-g-wrap

Transfer svg presentation attributes to a wrapping g element

Author: w0rm

index.js

@@ -5,6 +5,24 @@ const fancyLog = require('fancy-log')
 const PluginError = require('plugin-error')
 const Vinyl = require('vinyl')
 
+const presentationAttributes = new Set([
+  'style', 'alignment-baseline', 'baseline-shift', 'clip', 'clip-path',
+  'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters',
+  'color-profile', 'color-rendering', 'cursor', 'd', 'direction', 'display',
+  'dominant-baseline', 'enable-background', 'fill', 'fill-opacity', 'fill-rule',
+  'filter', 'flood-color', 'flood-opacity', 'font-family', 'font-size',
+  'font-size-adjust', 'font-stretch', 'font-style', 'font-variant',
+  'font-weight', 'glyph-orientation-horizontal', 'glyph-orientation-vertical',
+  'image-rendering', 'kerning', 'letter-spacing', 'lighting-color',
+  'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'overflow',
+  'pointer-events', 'shape-rendering', 'solid-color', 'solid-opacity',
+  'stop-color', 'stop-opacity', 'stroke', 'stroke-dasharray',
+  'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit',
+  'stroke-opacity', 'stroke-width', 'text-anchor', 'text-decoration',
+  'text-rendering', 'transform', 'unicode-bidi', 'vector-effect', 'visibility',
+  'word-spacing', 'writing-mode'
+]);
+
 module.exports = function (config) {
 
   config = config || {}
@@ -111,7 +129,19 @@ module.exports = function (config) {
       $defs.remove()
     }
 
-    $symbol.append($svg.contents())
+    let $groupWrap = null
+    for (let [name, value] of Object.entries($svg.attr())) {
+      if (!presentationAttributes.has(name)) continue;
+      if (!$groupWrap) $groupWrap = $('<g/>')
+      $groupWrap.attr(name, value)
+    }
+
+    if ($groupWrap) {
+      $groupWrap.append($svg.contents())
+      $symbol.append($groupWrap)
+    } else {
+      $symbol.append($svg.contents())
+    }
     $combinedSvg.append($symbol)
     cb()
   }

test.js

@@ -287,6 +287,30 @@ describe('gulp-svgstore unit test', () => {
       stream.end()
   })
 
+  it('should transfer svg presentation attributes to a wrapping g element', (done) => {
+      const stream = svgstore({ inlineSvg: true })
+      const attrs = 'stroke="currentColor" stroke-width="2" stroke-linecap="round" style="fill:#0000"';
+
+      stream.on('data', (file) => {
+        assert.strictEqual(
+          '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
+          `<symbol id="rect"><g ${attrs}><rect width="1" height="1"/></g></symbol></svg>`,
+          file.contents.toString()
+        )
+        done()
+      })
+
+      stream.write(new Vinyl({
+        contents: Buffer.from(
+          `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ${attrs}>` +
+          '<rect width="1" height="1"/></svg>'
+        )
+      , path: 'rect.svg'
+      }))
+
+      stream.end()
+  })
+
   it('Warn about duplicate namespace value under different name', (done) => {
       const stream = svgstore()