What is the best way to adjust the size of an svg with CSS?

Here is a question that may be relevant: How can I resize an SVG?

I am interested in resizing the arrow created in SVG using CSS. The linked question achieved this through an HTML directive (viewBox="0 0 32 32")

Does anyone have any suggestions?

#DIV_1 {
    float: left;
    font-family: 'PT Sans Narrow';
    font-size: 13px;
    height: 33px;
    overflow-wrap: break-word;
    padding-right: 20px;
    padding-top: 8px;
    text-align: center;
    width: 50px;
    word-wrap: break-word;
    perspective-origin: 35px 20.5px;
    transform-origin: 35px 20.5px;
    font: normal normal normal normal 13px/normal 'PT Sans Narrow';
    padding: 8px 20px 0px 0px;
}/*#DIV_1*/

#svg_2 {
    font-family: 'PT Sans Narrow';
    font-size: 13px;
    height: 29px;
    overflow-wrap: break-word;
    overflow-x: hidden;
    overflow-y: hidden;
    text-align: center;
    width: 50px;
    word-wrap: break-word;
    perspective-origin: 25px 14.5px;
    transform-origin: 25px 14.5px;
    font: normal normal normal normal 13px/normal 'PT Sans Narrow';
    overflow: hidden;
}/*#svg_2*/

#path_3 {
    font-family: 'PT Sans Narrow';
    font-size: 13px;
    overflow-wrap: break-word;
    text-align: center;
    word-wrap: break-word;
    fill: rgb(25, 94, 2);
    font: normal normal normal normal 13px/normal 'PT Sans Narrow';
}/*#path_3*/
<div class="igc-textual-icon" id="DIV_1"><svg data-id="" height="29" width="50" version="1.1" xmlns="http://www.w3.org/2000/svg" id="svg_2">
    <path class="igc-table-scaledpath" fill="#195e02" d="M50,25C49.99999999999999,25.84,49.69333333333333,26.573333333333334,49.08,27.2C48.46666666666666,27.826666666666664,47.73333333333333,28.133333333333333,46.879999999999995,28.12C46.879999999999995,28.12,3.1399999999999935,28.12,3.1399999999999935,28.12C2.2999999999999936,28.119999999999997,1.56666666666666,27.813333333333333,0.9399999999999933,27.2C0.31333333333332647,26.586666666666662,0.006666666666659825,25.853333333333328,0.019999999999993245,25C0.033333333333326665,24.14666666666667,0.3399999999999933,23.413333333333334,0.9399999999999933,22.8C0...
</svg></div>

htmlcsssvg

Answer №1

To incorporate this code into your svg in html, add 

preserveAspectRatio="xMinYMin meet"
and remove the width and height attributes. After that, you can adjust its size by changing the width and height of the parent div.

Here is an example where you can alter the dimensions of the parent div using CSS:

Example

HTML snippet:

<div class="igc-textual-icon" id="DIV_1"><svg data-id="" viewBox="0 0 56 56" preserveAspectRatio="xMinYMin meet" version="1.1" xmlns="http://www.w3.org/2000/svg" id="svg_2">
    <path class="igc-table-scaledpath" fill="#195e02" d="M50,25C49.99999999999999,25.84,49.69333333333333,26.573333333333334,49.08,27.2C48.46666666666666,27.826666666666664,47.73333333333333,28.133333333333333,46.879999999999995,28.12C46.879999999999995,28.12,3.1399999999999935,28.12,3.1399999999999935,28.12C2.2999999999999936,28.119999999999997,1.56666666666666,27.813333333333333,0.9399999999999933,27.2C0.31333333333332647,26.586666666666662,0.006666666666659825,25.853333333333328,0.019999999999993245,25C0.033333333333326665,24.14666666666667,0.339...;width: 300px;height: 300px;">
</div>

Answer №2

To resize an SVG, one simple approach is to utilize the transform/scale declaration:

#svg_2{
  transform: scale(0.5); /* This will shrink it by half */
}

Another method involves using the "transfrom" attribute directly within the SVG markup, whether on the svg element itself or any of its child elements such as path - for instance: transform="scale(0.5)"

<svg 
  data-id="" height="29" width="50" version="1.1" 
  xmlns="http://www.w3.org/2000/svg" id="svg_2"
  transform="scale(0.5)"
>

Alternatively, increasing the number above 1 can enlarge the size of the SVG.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can someone show me how to verify in PHP (using codeigniter) if the following two rows contain any data?

I need to verify whether the following TWO rows or ID are not NULL. If there are no consecutive TWO rows or ID, then the income will stay at zero. foreach ($data as $row) { if(($row->id + 2) != NULL) //I am unsure about the c ...

phphtmlsqlcodeigniter

Is there a way to create a dynamic associative array using jquery?

I am looking to create an array structured like the following:- arr[0][from] = value arr[0][to] = value arr[1][from] = value arr[1][to] = value . . And so forth. I have input array html elements for the from & to fields. <input type="text" name ...

javascriptjqueryhtmlarrays

List items not appearing inline

I'm having an issue with displaying a list of movies from my database. Instead of showing inline as intended, they are appearing vertically. I've tried using both inline-block and inline for the li elements, but so far nothing has worked. Any ass ...

phphtmlcssblockinline

Transferring information from user input to a table using AngularJS

I need assistance with AngularJS to transfer data from 2 input fields (name and last name) into a table row. <input type="text" ng-model="name"> <input type="text" ng-model="lastname"> Here is the structure of my table: <tabl ...

angularjshtml

I find myself with just one button in my javascript function, but I actually need two

I'm currently working on a class assignment where I'm trying to create a javascript function that uses a button to display the value on a slider component. However, I'm running into an issue where only one button appears instead of two, even ...

javascripthtmlarraysbutton

Aligning images in a table grid of 300px by 300px dimensions

I've included my code below and I am searching for the most effective method to use CSS to center an image both horizontally and vertically within a 300 by 300 pixel square. If the image is larger, it should be resized to fit within the square, while ...

htmlcsshtml-tablecentering

Issues with jQuery toggle functionality have been reported specifically on the iPhone8 and other iOS devices

Hi everyone, I'm facing an issue with the header on my website. It displays a hamburger menu on small screens, and while it works perfectly on PCs and Android phones, it's unresponsive on iOS, specifically on my iPhone 8. I've tried using va ...

jqueryhtmlcsstoggleresponsive

Ways to adjust dimensions depending on zoom level or screen size

Here is the HTML code snippet: <div id="divMainFirst"> <div id="divInnerFirst"> <div id="divTitleHeaderUC"> <span id="spanTitleHeaderUC">Urgent Care Wait Time</span> </d ...

htmlcss

What is the best way to choose a specific div within a container that contains additional HTML elements?

I am facing an issue with selecting the second div tag within a section that contains 2 divs and an img tag. I attempted to use section div:nth-child(2), but it is targeting the second element inside the first div. However, my goal is to select the secon ...

htmlcss

An irritating bug causing a 1px difference in Chrome 21

Hey there, I've encountered a strange issue with the datepicker on this website. It works perfectly fine on IE8+, Firefox 14, Chrome 20, and Opera 12. However, as soon as Chrome updated to version 21, things went haywire! I'm baffled and can&apos ...

cssgoogle-chrome

Tips for maintaining a single-line div while adding ellipses:

What is the CSS way to ensure that a div or class contains only one line of text, with ellipses added if it exceeds that limit? I am aware that setting a specific height and using overflow:hidden can achieve this, but it doesn't quite work for my need ...

javascriptcsshtmllayout

PHP method that invokes HTML code

I recently developed a registration and login system using object-oriented PHP. I am now looking to make the HTML code accessible from within a PHP method. Below is the View.php class that contains methods for creating the login and registration UI: < ...

phphtml

What is the best way to showcase the following values using Vue.js?

{"status":true,"data":[{"ref_id":"22","agent_id":"68","p_id":"84","description":"i am interested"},{"ref_id":"24","agent_id":"68","p_id":"84","description":"For more information about Bootstrap and Bootstrap Glyphicons, visit our Bootstrap Tutorial.For mor ...

javascriptphphtmlvue.js

"Exploring the magic of Vue.js and Three.js: A guide to seamlessly changing CSS style elements within an

I'm currently in the process of converting my Three.js project to Vue.js Within my Three.js scene, I have a 3D model with HTML points of interest attached to it. It is crucial that these points remain fixed to the model and consistently face the cam ...

javascripthtmlcssvue.jsthree.js

The ValueError message indicated that the data provided contained 282 columns, while only 60 columns were expected

I encountered the following error message: ValueError: 60 columns passed, passed data had 282 columns. How can I resolve this issue? You can find more information on the problem by visiting the following page: . Once you are on that page, click on Q1 and ...

htmlweb-scrapingbeautifulsoup

Ways to populate dynamic choices for multiple Select boxes within an ng-repeat loop

When I click the "Add Row" button on an Html form, dynamic rows are added. Each row contains a 'Country' select and a 'State' select. The issue I am facing is that when I select a country in one row, all other row values change as well. ...

javascripthtmlangularjsservicenow

No encoding specified in POST request headers

When sending an HTML page with UTF-8 encoding that contains a form, is it possible that the browser does not specify the encoding in the POST request header parameters? I decided to test this with the latest versions of Firefox 18 and Internet Explorer 9 ...

htmlformshttpencoding

What is the best method for implementing a dropdownlist submenu in yii2?

I am facing an issue with the yii2 field class dropdownlist submenu. Can someone guide me on how to create a submenu or subselect list in a dropdownlist? https://i.sstatic.net/Arz6O.jpghttps://i.sstatic.net/jqXIh.jpg Here is my database schema: +-------- ...

phphtmldrop-down-menuyii2html-select

Combining Java for the back-end and JavaScript for the front-end: a comprehensive guide

Looking for advice on integrating a Java back-end with a JavaScript, HTML 5 front-end in my web application. Any tips on passing content between the two languages? ...

javajavascripthtmlclient-server

Turn off the background color box with a single click

Whenever I click on a header menu item, the background changes along with it. Is there a way to prevent this from happening? https://i.stack.imgur.com/p6bJ9.png Take a look here ...

csswordpress