Scaling SVG Graphics in Real-Time

Question

Scaling SVG Graphics in Real-Time

I am currently developing a website where users can interact with an SVG image using textboxes. One of my goals is to make sure the SVG image scales to fit the container div.

For example, if the SVG was the same height as the container but only 10 pixels wide, doubling the height would make the width appear to be 5 pixels.

My webpage layout consists of numbers on the left side and the image on the right side. As a result, resizing the browser changes the shape of the SVG's container element, making it difficult to set fixed dimensions for the container in the SVG code.

Although I have searched online for solutions involving the use of the viewBox attribute, I have not been able to find a way to implement it without specifying a hard-coded container size.

Feel free to check out this fiddle with my editor setup:

https://jsfiddle.net/xyjs5b63/

html css svg

Answer 1

Answer №1

It seems like adjusting the viewBox might be the solution you're looking for. I'm not entirely sure why it didn't work before.

var svg = document.querySelector('svg');

var inputs = document.querySelectorAll('input');

var height_elem = inputs[0];
var width_elem = inputs[1];

height_elem.value = '100';
width_elem.value = '100';

height_elem.addEventListener("change", valueChange);
width_elem.addEventListener("change", valueChange);

function valueChange() {
    svg.setAttribute('viewBox', "0 0 "+width_elem.value+" "+height_elem.value);
}

valueChange();

#out {
    width: 100px;
    height: 100px;
    background-color: honeydew;
}

svg {
  width: 100%;
  height: 100%;
}

<div id="main">
    <div id="in">
        <input type="number"><br>
        <input type="number">
    </div>
    <div id="out">
        <svg>
            <rect width="100%" height="100%"></rect>
        </svg>
    </div>
</div>

Answer 2

It seems like adjusting the viewBox might be the solution you're looking for. I'm not entirely sure why it didn't work before.

var svg = document.querySelector('svg');

var inputs = document.querySelectorAll('input');

var height_elem = inputs[0];
var width_elem = inputs[1];

height_elem.value = '100';
width_elem.value = '100';

height_elem.addEventListener("change", valueChange);
width_elem.addEventListener("change", valueChange);

function valueChange() {
    svg.setAttribute('viewBox', "0 0 "+width_elem.value+" "+height_elem.value);
}

valueChange();

#out {
    width: 100px;
    height: 100px;
    background-color: honeydew;
}

svg {
  width: 100%;
  height: 100%;
}

<div id="main">
    <div id="in">
        <input type="number"><br>
        <input type="number">
    </div>
    <div id="out">
        <svg>
            <rect width="100%" height="100%"></rect>
        </svg>
    </div>
</div>

Answer 3

Answer №2

var rectangle = document.querySelector('rect');
var drawing = document.querySelector('svg');

var inputs = document.querySelectorAll('input');

var height_input = inputs[0];
var width_input = inputs[1];

height_input.value = '100';
width_input.value = '100';

height_input.addEventListener("change", inputChange);
width_input.addEventListener("change", inputChange);

function inputChange() {
    var max = parseInt(height_input.value) >= parseInt(width_input.value) ? 'h' : 'w';
    if (max == 'h') {
        rectangle.setAttribute('height', "100%");
        rectangle.setAttribute('width', (width_input.value * 100 / height_input.value)+"%");
    } else {
        rectangle.setAttribute('width', "100%");
         rectangle.setAttribute('height', (height_input.value * 100 / width_input.value)+"%");
        }
}

inputChange();

#container {
    width: 100%;
    padding: 0;
}

#inside {
    float: left;
    width: 40%;
    height: 100%
}

#outside {
    margin: 10%;
    width: 20vw;
    height: 20vw;
}

svg {
    width: 100%;
    height: 100%;
}

<div id="container">
<div id="inside">
    Height: <input type="number"><br>
    Width: <input type="number">
</div>
<br>
<div id="outside">
    <svg height="auto">
    <rect></rect></svg>
</div>
</div>

Is this the solution you were looking for?

Answer 4

var rectangle = document.querySelector('rect');
var drawing = document.querySelector('svg');

var inputs = document.querySelectorAll('input');

var height_input = inputs[0];
var width_input = inputs[1];

height_input.value = '100';
width_input.value = '100';

height_input.addEventListener("change", inputChange);
width_input.addEventListener("change", inputChange);

function inputChange() {
    var max = parseInt(height_input.value) >= parseInt(width_input.value) ? 'h' : 'w';
    if (max == 'h') {
        rectangle.setAttribute('height', "100%");
        rectangle.setAttribute('width', (width_input.value * 100 / height_input.value)+"%");
    } else {
        rectangle.setAttribute('width', "100%");
         rectangle.setAttribute('height', (height_input.value * 100 / width_input.value)+"%");
        }
}

inputChange();

#container {
    width: 100%;
    padding: 0;
}

#inside {
    float: left;
    width: 40%;
    height: 100%
}

#outside {
    margin: 10%;
    width: 20vw;
    height: 20vw;
}

svg {
    width: 100%;
    height: 100%;
}

<div id="container">
<div id="inside">
    Height: <input type="number"><br>
    Width: <input type="number">
</div>
<br>
<div id="outside">
    <svg height="auto">
    <rect></rect></svg>
</div>
</div>

Is this the solution you were looking for?

Scaling SVG Graphics in Real-Time

Answer №1

Answer №2

Similar questions

Issues with margin and padding-top not functioning properly when using @media for printing

jQuery functions smoothly on Firefox, but encountering issues on Chrome

Steps to insert a Drop-Down Sub-Menu

How can I position two bootstrap tables side by side based on their columns

When applying a maximum width of 100% with automatic height, images may become cropped

I'm having trouble with jQuery recognizing the left-margin property. Is there a workaround for this issue?

Attempting to navigate the world of AJAX and PHP

Slider in MaterialUI featuring a vibrant spectrum of colors

The stylesheet malfunctioned while attempting to load varying layouts in separate controllers

Is there a way to adjust the position of ::before elements without affecting the border placement?

The functionality for the "OnChange" event in the <html:select> field does not seem to be functioning properly

Displaying a div in Vue.js when a button is clicked and an array is filled with

Is there a way to add additional text to a text element within an SVG?

I'm looking for assistance in setting up a static sidebar within a two column layout. Any takers

Unique background image tailor-made for each radio button

Enhance the functionality of your website by implementing a zoom feature

Displaying the result of a JavaScript function in a textarea

Bug in canvas rendering for Chrome versions 94 and 95

Bootstrap: when divs cover the jumbotron

Can you please tell me the CSS combinator used for the selectors (foo bar, foo biz, foo tar, foo boo { })?