Adjusting SVG viewBox attribute

svg, tip, js

Sometimes I find SVG illustrations that I like but sometimes they come with a big background or I might just want to use some parts of the illustration.

Take as an examples the icons from the cards in The Framework section of the homepage:

alt alt alt

Getting the viewBox from DevTools

// 1. Grab the <svg> element you care about
const svg = document.querySelector('.hero-media svg');

// 2. Grab the inner <g> that contains the artwork
const g = svg.querySelector('g');

// 3. Ask the browser for the smallest rectangle that encloses that <g>
const box = g.getBBox();

// 4. Set the svg's viewBox to that rectangle
svg.setAttribute('viewBox', `${box.x} ${box.y} ${box.width} ${box.height}`);

box;