inline definitions #976

marinewater · 2018-06-06T17:02:04Z

this inlines definitions
e.g. turns

<svg id="test01" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
    <defs>
        <rect width="100" height="100" id="rect1"/>
    </defs>
    <use xlink:href="#rect1"></use>
</svg>

into

<svg id="test01" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
    <rect width="100" height="100" id="rect1"/>
</svg>

By default, only definitions which are used once are inline. If you set the onlyUnique parameter to false, all definitions will be inlined.
Should solve #563

lancedikson · 2018-06-20T09:45:46Z

Would be great to have this implemented! 👍

allinne · 2018-06-21T17:46:09Z

Bump this PR :-)

racingrebel · 2018-07-23T18:05:05Z

@GreLI Please implement this PR! It will help many Sketch users. I was actually about to do a PR to solve this problem until I stumbled upon this.

lancedikson · 2018-07-23T18:23:40Z

plugins/inlineDefs.js

+    var useCount = _countUses(uses);
+
+    for (var i = 0; i < uses.length; i++) {
+        var href = uses[i].attr('xlink:href').value;


It's href in SVG 2.0, btw: https://www.w3.org/TR/SVG2/struct.html#UseElement

chrleon · 2018-09-13T13:34:47Z

Cloning the repo and adding in this as a plugin, did not work for me without two steps.

I have tried exporting from Sketch without SVGO

<?xml version="1.0" encoding="UTF-8"?> <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  <title>icons/carousel</title> <desc>Created with Sketch.</desc> <defs> <path d="M11,23 L11,8 L21,8 L21,23 L11,23 Z M13,10 L13,21 L19,21 L19,10 L13,10 Z M6,10 L10,10 L10,21 L6,21 L6,10 Z M22,10 L26,10 L26,21 L22,21 L22,10 Z" id="path-1"></path> </defs> <g id="icons/carousel" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <mask id="mask-2" fill="white"> <use xlink:href="#path-1"></use> </mask> <use id="Mask" fill="#444444" fill-rule="nonzero" xlink:href="#path-1"></use> </g> </svg>

Returns this with inlineDefs
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"> <defs><path id="path-1" d="M11 23V8h10v15H11zm2-13v11h6V10h-6zm-7 0h4v11H6V10zm16 0h4v11h-4V10z"/></defs><use fill-rule="nonzero" xlink:href="#path-1"/></svg>

Export from sketch with SVGO Compressor goes from
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32"> <defs> <path d="M11,23 L11,8 L21,8 L21,23 L11,23 Z M13,10 L13,21 L19,21 L19,10 L13,10 Z M6,10 L10,10 L10,21 L6,21 L6,10 Z M22,10 L26,10 L26,21 L22,21 L22,10 Z" id="path-1"/> </defs> <use xlink:href="#path-1"/> </svg>

to this with inlineDefs

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> <path d="M11 23V8h10v15H11zm2-13v11h6V10h-6zm-7 0h4v11H6V10zm16 0h4v11h-4V10z" /> </svg>

So I need to use SVGO Compressor from sketch and then do svgo in node to get it like I want.

I tried setting onlyUnique to false, but that often ended in an error.

The above is FYI on this PR, so I'll do more research on my part.

mathieudutour · 2018-09-19T00:16:26Z

I believe that's because the plugin is currently set to run first so it's applied before the other optimizations are applied. It should probably be set to run last.

Also, worth noting that the latest version of the SVGO Sketch plugin supports custom svgo plugins: https://github.com/BohemianCoding/svgo-compressor#custom-svgo-plugins but it would definitely be nice to merge this PR as it's a pretty important SVG optimisation

edahlseng · 2018-12-20T18:00:00Z

@GreLI, @deepsweet, What's needed to get this PR merged? It looks like an incredibly useful tool!

Saegrov · 2019-01-08T22:19:40Z

If the element beeing inlined is a symbol-element, this plugin doesn't

I have the following SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32">
    <defs>
        <symbol id="b" viewBox="0 0 31.55 27.98">
            <path fill="#fff" fill-rule="evenodd"
                  d="M31.36 25.74A1.51 1.51 0 0 1 30.05 28H1.5a1.46 1.46 0 0 1-.74-.19 1.5 1.5 0 0 1-.56-2.07L14.47.76a1.5 1.5 0 0 1 2.61 0z"/>
            <path fill="#ff9d00" fill-rule="evenodd"
                  d="M30.92 26L16.65 1a1 1 0 0 0-1.37-.37 1.09 1.09 0 0 0-.37.37L.63 26A1 1 0 0 0 1 27.35a1 1 0 0 0 .5.13h28.55a1 1 0 0 0 1-1 1 1 0 0 0-.13-.48z"/>
            <path d="M30.92 26a1 1 0 0 1 .13.49 1 1 0 0 1-1 1H1.5a1 1 0 0 1-.5-.13A1 1 0 0 1 .63 26L14.91 1a1.09 1.09 0 0 1 .37-.37 1 1 0 0 1 1.37.37zm-.43.25l-14.28-25a.49.49 0 0 0-.68-.18.47.47 0 0 0-.19.18l-14.27 25a.49.49 0 0 0 .18.68.54.54 0 0 0 .25.07h28.55a.5.5 0 0 0 .5-.5.5.5 0 0 0-.06-.26z"
                  opacity=".5"/>
        </symbol>
        <symbol id="a" viewBox="0 0 24.78 15.48">
            <path d="M16.78 3a2 2 0 1 0 2 2 2 2 0 0 0-2-2m-4-3a1 1 0 1 0 1 1 1 1 0 0 0-1-1m9 14a3 3 0 1 0-3-3 3 3 0 0 0 3 3m-2.69 1.48H.5a.54.54 0 0 1-.25-.06.51.51 0 0 1-.18-.69L8.28.36z"/>
        </symbol>
        <symbol id="c" viewBox="0 0 24.78 15.48">
            <use width="24.78" height="15.48" xlink:href="#a"/>
        </symbol>
    </defs>
    <use width="31.55" height="27.98" transform="translate(.2 3.02)" xlink:href="#b"/>
    <use width="24.78" height="15.48" transform="translate(1.22 14.5)" xlink:href="#c"/>
</svg>

Which should turn into something like this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32">
    <g transform="translate(.2 3.02)">
        <path fill="#fff" fill-rule="evenodd" d="M31.36 25.74A1.51 1.51 0 0 1 30.05 28H1.5a1.46 1.46 0 0 1-.74-.19 1.5 1.5 0 0 1-.56-2.07L14.47.76a1.5 1.5 0 0 1 2.61 0z"/>
        <path fill="#ff9d00" fill-rule="evenodd" d="M30.92 26L16.65 1a1 1 0 0 0-1.37-.37 1.09 1.09 0 0 0-.37.37L.63 26A1 1 0 0 0 1 27.35a1 1 0 0 0 .5.13h28.55a1 1 0 0 0 1-1 1 1 0 0 0-.13-.48z"/>
        <path d="M30.92 26a1 1 0 0 1 .13.49 1 1 0 0 1-1 1H1.5a1 1 0 0 1-.5-.13A1 1 0 0 1 .63 26L14.91 1a1.09 1.09 0 0 1 .37-.37 1 1 0 0 1 1.37.37zm-.43.25l-14.28-25a.49.49 0 0 0-.68-.18.47.47 0 0 0-.19.18l-14.27 25a.49.49 0 0 0 .18.68.54.54 0 0 0 .25.07h28.55a.5.5 0 0 0 .5-.5.5.5 0 0 0-.06-.26z" opacity=".5"/>
    </g>
    <g transform="translate(1.22 14.5)">
        <g>
            <path d="M16.78 3a2 2 0 1 0 2 2 2 2 0 0 0-2-2m-4-3a1 1 0 1 0 1 1 1 1 0 0 0-1-1m9 14a3 3 0 1 0-3-3 3 3 0 0 0 3 3m-2.69 1.48H.5a.54.54 0 0 1-.25-.06.51.51 0 0 1-.18-.69L8.28.36z"/>
        </g>
    </g>
</svg>

As a proof of concept I changed the symbol-element to be a g-element and deleted invalid attributes. I have no idea if this is the way to do it, but at least my SVG worked with this modification.

The following code was replaced line 87.

if(def.elem === 'symbol') {
  def.elem = 'g';
  def.local = 'g';
  def.removeAttr('viewBox');
  def.removeAttr('width');
  def.removeAttr('height');
  def.removeAttr('id');
}
_replaceElement(uses[i], def);

shoogle · 2019-01-08T23:10:14Z

Unfortunately it appears from #1055 that SVGO is no longer maintained. Maybe comment in #1055 if you think you have enough time and level of experience to help maintain it. Please don't comment there to criticize anybody or to say that "somebody ought to maintain it" as that creates spam and will not help the situation. Feel free to use upvoting/downvoting to make your opinions known, but do remember that this is a volunteer project so developers are free to come and go as they please.

The code is taken from #976, refactored with new api, covered types and simplified. Plugin has no dependencies so can be used without changing. ``` const inlineDefs = require('./inlineDefs.js'); module.exports = { plugins: [ 'preset-default', inlineDefs ] }; ```

marinewater added 3 commits June 3, 2018 21:25

added: plugin inline defs

568a9b8

updated: use onlyUnique = true by default

d001ad0

fixed: jshint errors

5b77605

lancedikson suggested changes Jul 23, 2018

View reviewed changes

updated: added support for href in svg2

11fe05a

farnabaz mentioned this pull request Sep 4, 2019

Inline definitions nuxt-modules/svg-sprite#82

Merged

TrySound added the new plugin label Feb 17, 2021

TrySound force-pushed the master branch from 8d89e03 to 9de471a Compare February 23, 2021 21:58

TrySound force-pushed the master branch from 10c8b56 to ba7e9bd Compare March 5, 2021 22:36

TrySound mentioned this pull request Feb 21, 2022

[new plugin] reimplement inlineDefs #1655

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

inline definitions #976

inline definitions #976

marinewater commented Jun 6, 2018

lancedikson commented Jun 20, 2018

allinne commented Jun 21, 2018

racingrebel commented Jul 23, 2018 •

edited

Loading

lancedikson Jul 23, 2018

chrleon commented Sep 13, 2018

mathieudutour commented Sep 19, 2018

edahlseng commented Dec 20, 2018

Saegrov commented Jan 8, 2019 •

edited

Loading

shoogle commented Jan 8, 2019

inline definitions #976

Are you sure you want to change the base?

inline definitions #976

Conversation

marinewater commented Jun 6, 2018

lancedikson commented Jun 20, 2018

allinne commented Jun 21, 2018

racingrebel commented Jul 23, 2018 • edited Loading

lancedikson Jul 23, 2018

Choose a reason for hiding this comment

chrleon commented Sep 13, 2018

mathieudutour commented Sep 19, 2018

edahlseng commented Dec 20, 2018

Saegrov commented Jan 8, 2019 • edited Loading

shoogle commented Jan 8, 2019

racingrebel commented Jul 23, 2018 •

edited

Loading

Saegrov commented Jan 8, 2019 •

edited

Loading