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

What might be causing the in-viewport javascript to not work in my code?

Is it possible to create a single button that, upon clicking, fades in one image while simultaneously fading out another?

Modification of a CSS element

Is there a way to eliminate the menuArrow from a Select widget in gwt-bootstrap3?

What is the best way to display a collection of square Views in a FlatList in a react native application?

Issues with IE 11: SVG Map Not Triggering Mouseenter or Mouseleave Events

The fixed left div and scrollable right div are experiencing issues with their alignment

Having trouble with your website not adjusting properly when resizing the browser or viewing it on a mobile phone

Troubleshooting: jQuery animation for background-color doesn't function in Internet Explorer

What is the process for adjusting the color of a mat-divider?

"Add a new style sheet to the homepage of your WordPress site using the

Is it possible to use HTML code as content in CSS?

Materriel-UI ToggleButton has the appearance of a traditional button

Proper alignment of content in HTML using Bootstrap following the integration of .json data

When state updates in React, the component will rerender without affecting its style

What is the best way to align two HTML elements in a single column?

Adjusting the alignment of button text in an Angular Kendo grid

Easy Div Centering with jQuery Toggle for Internet Explorer 6

Using Javascript to dynamically swap images within a div as the user scrolls

Aligning the column to the right to ensure the text is centered horizontally on the screen