Unusual behavior of diagonal viewBox in SVG

Question

Unusual behavior of diagonal viewBox in SVG

Trying to understand how the viewBox attribute works in SVG, but the code below is confusing me. Can someone please explain if this is a bug or the expected behavior of SVG? I can't seem to figure out what I'm doing wrong...

<svg class="symbol"><symbol id="Atom" preserveAspectRatio="xMinYMin meet" viewBox="0 0 10 7"><path d="M3 6 4 7 6 7 4 4 5 3 8 7 10 7 5 0 0 7 2 7Z"></path></symbol></svg>

This is my SVG symbol here, and I'm attempting to stack multiple instances both horizontally and vertically.

//vertical stack ->viewBox = 0, 0, 10*1, 7*2
<svg viewBox="0 0 10 14">
      <use href="#Atom"/>
      <use href="#Atom" y="7"/> 
</svg>

//horizontal stack ->viewBox = 0, 0, 10*2, 7*1
<svg viewBox="0 0 20 7">
      <use href="#Atom"/>
      <use href="#Atom" x="10"/>    
</svg>

//"diagonal" stack ->viewBox = 0, 0, 10*2, 7*2
<svg viewBox="0 0 20 14">
      <use href="#Atom"/>
      <use href="#Atom" x="10"/>
      <use href="#Atom" y="7"/>
</svg>

The first stacking example has two symbols placed vertically, with the same viewBox dimensions as the symbol but with double the height from 7 to 14. This works perfectly.

In the second example, there are two symbols stacked horizontally, maintaining the same viewBox dimensions as the original symbol but doubling the width from 10 to 20. This also works correctly.

However, in the third example with two symbols stacked both horizontally and vertically, setting the viewBox width and height to be twice the original does not work properly. https://i.stack.imgur.com/kKiPS.png

As shown in the image, the symbols overlap (indicating a potential issue with the viewBox).

Here is an example of what I am trying to achieve (note that overflow: visible is used, causing the symbols to extend beyond the viewBox).

https://i.stack.imgur.com/cQTO0.png

Could someone please clarify where I might be going wrong with this? Any assistance would be greatly appreciated.

For anyone interested in experimenting with this, here's the codepen link.

css svg position viewbox sizing

Answer 1

Answer №1

your symbol desires to occupy the entire width or height when only one dimension of the viewport is stretched, it fits perfectly because it takes up the full width or height and refrains from stretching in the other direction in order to maintain its aspect ratio.

However, in this scenario, the svg viewport is twice as large as the symbol, so it occupies all the available space

here is a simple solution

.svg {
  max-width: 200px;
  border: 1px solid red;
}

<svg class="svg" viewBox="0 0 20 14">
    <use href="#Atom" x="0" y="0"  width="50%" />
    <use href="#Atom" x="0" y="7"  width="50%" />
    <use href="#Atom" x="10" y="0" width="50%" />
    <use href="#Atom" x="10" y="7" width="50%" />
</svg>
<svg class="symbol"><symbol id="Atom" preserveAspectRatio="xMinYMin meet" viewBox="0 0 10 7"><path d="M3 6 4 7 6 7 4 4 5 3 8 7 10 7 5 0 0 7 2 7Z"></path></symbol></svg>

UPDATE:

if you do not wish to manually add width to the use tag AND are generating them programmatically (I assumed you are using JavaScript but the same logic could be applied to other languages), you simply need to calculate the rows and columns in your viewport and determine the width and height of each use

here is an example

const config = {
    svg: {
        width: 20,
        height: 14,
        rows: 2,
        cols: 2,
        symbol: '#Atom'
    }
}
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', '0 0 '+config.svg.width+' '+config.svg.height);

for (let i = 0; i < config.svg.rows; i++) {
    for (let j = 0; j < config.svg.cols; j++) {
        const xPosition = (config.svg.width / config.svg.rows) * i;
        const yPosition = (config.svg.height / config.svg.cols) * j;

        const width = (100 / config.svg.rows);
        const height = (100 / config.svg.cols);

        const svgUse = document.createElementNS('http://www.w3.org/2000/svg', 'use');
        svgUse.setAttribute('href', config.svg.symbol);
        svgUse.setAttribute('x', xPosition);
        svgUse.setAttribute('y', yPosition);
        svgUse.setAttribute('width', width + '%');
        svgUse.setAttribute('height', height + '%');

        svg.append(svgUse);
    }
}

document.body.prepend(svg)

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <svg class="symbol"><symbol id="Atom" preserveAspectRatio="xMinYMin meet" viewBox="0 0 10 7"><path d="M3 6 4 7 6 7 4 4 5 3 8 7 10 7 5 0 0 7 2 7Z"></path></symbol></svg>
    </body>
</html>

Answer 2

your symbol desires to occupy the entire width or height when only one dimension of the viewport is stretched, it fits perfectly because it takes up the full width or height and refrains from stretching in the other direction in order to maintain its aspect ratio.

However, in this scenario, the svg viewport is twice as large as the symbol, so it occupies all the available space

here is a simple solution

.svg {
  max-width: 200px;
  border: 1px solid red;
}

<svg class="svg" viewBox="0 0 20 14">
    <use href="#Atom" x="0" y="0"  width="50%" />
    <use href="#Atom" x="0" y="7"  width="50%" />
    <use href="#Atom" x="10" y="0" width="50%" />
    <use href="#Atom" x="10" y="7" width="50%" />
</svg>
<svg class="symbol"><symbol id="Atom" preserveAspectRatio="xMinYMin meet" viewBox="0 0 10 7"><path d="M3 6 4 7 6 7 4 4 5 3 8 7 10 7 5 0 0 7 2 7Z"></path></symbol></svg>

UPDATE:

if you do not wish to manually add width to the use tag AND are generating them programmatically (I assumed you are using JavaScript but the same logic could be applied to other languages), you simply need to calculate the rows and columns in your viewport and determine the width and height of each use

here is an example

const config = {
    svg: {
        width: 20,
        height: 14,
        rows: 2,
        cols: 2,
        symbol: '#Atom'
    }
}
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', '0 0 '+config.svg.width+' '+config.svg.height);

for (let i = 0; i < config.svg.rows; i++) {
    for (let j = 0; j < config.svg.cols; j++) {
        const xPosition = (config.svg.width / config.svg.rows) * i;
        const yPosition = (config.svg.height / config.svg.cols) * j;

        const width = (100 / config.svg.rows);
        const height = (100 / config.svg.cols);

        const svgUse = document.createElementNS('http://www.w3.org/2000/svg', 'use');
        svgUse.setAttribute('href', config.svg.symbol);
        svgUse.setAttribute('x', xPosition);
        svgUse.setAttribute('y', yPosition);
        svgUse.setAttribute('width', width + '%');
        svgUse.setAttribute('height', height + '%');

        svg.append(svgUse);
    }
}

document.body.prepend(svg)

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <svg class="symbol"><symbol id="Atom" preserveAspectRatio="xMinYMin meet" viewBox="0 0 10 7"><path d="M3 6 4 7 6 7 4 4 5 3 8 7 10 7 5 0 0 7 2 7Z"></path></symbol></svg>
    </body>
</html>

Answer 3

Answer №2

Although it may seem odd, I inadvertently replied to my own comment and I'd like to give a shoutout to @ciekals11 for their valuable input.

The missing piece that resolved my issue was including specific width and height attributes in my symbol. It's interesting how such a small detail can make everything fall into place flawlessly. Despite not fully understanding why this is necessary, I am happy to provide the updated version of my symbol for you to compare.

<svg class="symbol"><symbol width="10" height="7" id="Atom" preserveAspectRatio="xMinYMin meet" viewBox="0 0 10 7"><path d="M3 6 4 7 6 7 4 4 5 3 8 7 10 7 5 0 0 7 2 7Z"/></symbol></svg>

Answer 4

Although it may seem odd, I inadvertently replied to my own comment and I'd like to give a shoutout to @ciekals11 for their valuable input.

The missing piece that resolved my issue was including specific width and height attributes in my symbol. It's interesting how such a small detail can make everything fall into place flawlessly. Despite not fully understanding why this is necessary, I am happy to provide the updated version of my symbol for you to compare.

<svg class="symbol"><symbol width="10" height="7" id="Atom" preserveAspectRatio="xMinYMin meet" viewBox="0 0 10 7"><path d="M3 6 4 7 6 7 4 4 5 3 8 7 10 7 5 0 0 7 2 7Z"/></symbol></svg>

Unusual behavior of diagonal viewBox in SVG

Answer №1

Answer №2

Similar questions

Issues with Google Fonts failing to load correctly

Revamp the Bootstrap Form Upload feature

Creating parallel lines utilizing pseudo elements

Using Jquery to select and apply functions to specified div elements

Is it possible to combine margin auto with a transform on the left simultaneously?

The header that sticks on scroll is annoyingly blocking the content

The highlight_row function seems to be delayed, as it does not trigger on the initial onClick but works on subsequent clicks. How can I ensure it works properly right from the first click?

What is the process for embedding a 3D model using three.js into a specific div on a webpage?

Is Jquery Mobile's Table lacking responsiveness?

What is the best way to move the numerical range value into a span element?

What is the lowest opacity value allowed in CSS?

Creating my website with a unique inverse color scheme

Why is the placement of PHP code (for file uploads) in relation to HTML code important?

Prevent the movement of the first column in a table when rearranging rows up or down by utilizing

Ways to position an element at the center using Flexbox技

Solve the problem with SCSS at the component level in NextJS

Using selenium in conjunction with python to click a unique button

Is there a way to activate the mousewheel feature in order to zoom in and out on a webpage using jquery plugins like panzoom and circleslider?

Utilizing Host Styles in Angular2 Components

Tips on transitioning from Modal1 to Modal2 in Ionic after a successful submit button press?