SVG size change upon yarn build:production


#1

I used to size my inline SVGs via CSS (width / height) and that’s all working fine until I run yarn build:production – all of a sudden the SVGs break out of their boundaries or shrink and don’t adhere to the applied styling any more…

I needed to yarn build again and am running with the unoptimized assets now since I can’t get the icons to behave properly.

What am I missing here? Surely there is some optimization taking place and that’s all swell but either I am doing something wrong with my handling of the SVGs or this is ‘buggy’ in the sense of overwriting my styles / locking down the files…?

Has anyone of you experienced this?


SVG

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21.231 0h-18.462c-1.529 0-2.769 1.24-2.769 2.769v18.46c0 1.531 1.24 2.771 2.769 2.771h18.463c1.529 0 2.768-1.24 2.768-2.771v-18.46c0-1.529-1.239-2.769-2.769-2.769zm-9.231 7.385c2.549 0 4.616 2.065 4.616 4.615 0 2.549-2.067 4.616-4.616 4.616s-4.615-2.068-4.615-4.616c0-2.55 2.066-4.615 4.615-4.615zm9 12.693c0 .509-.413.922-.924.922h-16.152c-.511 0-.924-.413-.924-.922v-10.078h1.897c-.088.315-.153.64-.2.971-.05.337-.081.679-.081 1.029 0 4.079 3.306 7.385 7.384 7.385s7.384-3.306 7.384-7.385c0-.35-.031-.692-.081-1.028-.047-.331-.112-.656-.2-.971h1.897v10.077zm0-13.98c0 .509-.413.923-.924.923h-2.174c-.511 0-.923-.414-.923-.923v-2.175c0-.51.412-.923.923-.923h2.174c.511 0 .924.413.924.923v2.175z" fill-rule="evenodd" clip-rule="evenodd"/></svg> 

CSS

.social .icons a svg {
  fill: #4a96cd;
  height: 30px;
  width: 30px;
}

I have tried changing the hard-coded values inside the SVG (width / height / viewBox) but that doesn’t do the trick, guess the path is tied to the original sizing and thus I’d have to change that too but that’s obviously not the idea behind the whole vector-thing :slight_smile:

Thanks for your guidance.


#2

What’s the output of the SVG after it goes through the production build? Is viewBox stripped?


#3

Yepp, the viewBox is missing after the production build:

<svg class="svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M21.231 0H2.769A2.77 2.77 0 0 0 0 2.769v18.46A2.77 2.77 0 0 0 2.769 24h18.463A2.769 2.769 0 0 0 24 21.229V2.769A2.769 2.769 0 0 0 21.231 0zM12 7.385a4.615 4.615 0 1 1 .002 9.23A4.615 4.615 0 0 1 12 7.385zm9 12.693a.923.923 0 0 1-.924.922H3.924A.923.923 0 0 1 3 20.078V10h1.897a7.56 7.56 0 0 0-.2.971c-.05.337-.081.679-.081 1.029a7.384 7.384 0 1 0 14.768 0c0-.35-.031-.692-.081-1.028a7.56 7.56 0 0 0-.2-.971H21v10.077zm0-13.98a.924.924 0 0 1-.924.923h-2.174a.923.923 0 0 1-.923-.923V3.923c0-.51.412-.923.923-.923h2.174c.511 0 .924.413.924.923v2.175z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>

#4

Try playing with some of the svgo options via resources/assets/build/webpack.config.optimize.js. Example:

    new ImageminPlugin({
      ...
      svgo: {
        plugins: [
          { removeUnknownsAndDefaults: true },
          { cleanupIDs: false },
          { removeViewBox: false },
          { removeComments: true },
          { removeTitle: true },
          { removeDescription: true },
        ],
      },
      ...
    }),

#5

Working fine now!!

Tried following the existing markup in my resources/assets/build/webpack.config.optimize.js and that didn’t work, soon realized that this has already been addressed in this commit.

Maybe removeViewBox: false should be a default in Sage…?

Anyhow, thanks a bunch!


#6

:+1: Mind submitting a PR?