What is the best way to change the size of an SVG image

I have exhausted all the methods I could find on stackoverflow and Google, but my SVG is refusing to resize. Would someone kindly shed some light on why this might be happening?

<div>
  <svg viewBox="32 32 32 32" height="100" width="100">
        <g transform="translate(0,-952.36218)">
          <path d="m 50,971.36219 c -1.656801,0 -3,1.34315 -3,3 l 0,24.99998 -25,0 c -1.6568,0 -3,1.34313 -3,3.00003 0,1.6568 1.3432,3 3,3 l 25,0 0,25 c 0,1.6568 1.343199,3 3,3 1.656899,0 3,-1.3432 3,-3 l 0,-25 25,0 c 1.656801,0 3,-1.3432 3,-3 0,-1.6569 -1.343199,-3.00003 -3,-3.00003 l -25,0 0,-24.99998 c 0,-1.65685 -1.343101,-3 -3,-3 z"
            style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:ffffff;enable-background:accumulate;"
            fill="#ffffff" fill-opacity="1" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"
          />
        </g>
   </svg>
</div>

https://codepen.io/hellojessicagraham/pen/XBOyzP

htmlcsssvg

Answer №2

To adjust the size of your SVG image, you can modify the 'width' and 'height' attributes within the tag.

<svg viewBox="32 32 32 32" height="100" width="100">

Alternatively, you can use CSS in your stylesheet to set the dimensions:

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

<div style='background:red'>
  <svg viewBox="32 32 32 32" height="100" width="100">
        <g transform="translate(0,-952.36218)">
          <path d="m 50,971.36219 c -1.656801,0 -3,1.34315 -3,3 l 0,24.99998 -25,0 c -1.6568,0 -3,1.34313 -3,3.00003 0,1.6568 1.3432,3 3,3 l 25,0 0,25 c 0,1.6568 1.343199,3 3,3 1.656899,0 3,-1.3432 3,-3 l 0,-25 25,0 c 1.656801,0 3,-1.3432 3,-3 0,-1.6569 -1.343199,-3.00003 -3,-3.00003 l -25,0 0,-24.99998 c 0,-1.65685 -1.343101,-3 -3,-3 z"
            style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:ffffff;enable-background:accumulate;"
            fill="#ffffff" fill-opacity="1" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"
          />
        </g>
   </svg>
</div>

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

What are effective strategies to stop the generic * { … } style from overriding its parent tag?

How can I prevent my general * { ... } style from overriding the parent tag? In the given scenario, I want the text "sssssssss" to have the style text-huge. .text-huge { font-size: 28px !important; color: green !important; } * { font-size: 12px; ...

htmlcss

Accessing CSS content from a bundle within the code of an ASP.NET MVC website

I have a website that utilizes bootstrap along with a customized bootstrap theme. The website is designed to send notification emails to its users upon certain actions being triggered. For these notification emails, I want the content to be in well-format ...

cssasp.netbundleresourcebundleserver.mappath

Retrieve element attributes and context inside a function invoked by an Angular directive

When working with a directive definition, you have access to the $element and $attrs APIs. These allow you to refer back to the element that called the directive. However, I'm curious how to access $element and $attrs when using a standard directive l ...

javascripthtmlangularjs

Troubleshooting a Navigation Styling Issue in HTML and CSS

I'm struggling to position my drop-down menus correctly in my WordPress theme navigation. They are appearing far away from the nav bar and end up near the top left corner of the screen when I hover over a ul li >. Here is the CSS code I am using: ...

htmlcsswordpressthemes

Executing SendKeys on a div element with the attribute coleditable="true" in Selenium and C#

I am facing a challenge with an element that I am unable to input text into. <div class="floatstart gridcell grideditablefield" colname="Items" coltype="string" coleditable="true" val="" style="widt ...

c#htmlseleniumselenium-webdriversendkeys

Ways to modify the appearance of the Sign up page on Moodle

I'm a newcomer to the world of Moodle, currently using version 2.9. I've created a unique design for my Signup page using HTML5 and CSS. How do I go about integrating this custom page? While I understand how to change the default Login page by m ...

phpcsshtmlmoodle

Issue with rollover button function in Firefox and Internet Explorer when attempting to submit

I have created a rollover submit button using HTML and JavaScript: <input type="image" id="join" name="join" src="images/join.png" value="join"> My JS code implements the rollover/hover effect: <script type="text/javascript" charset="utf-8"> ...

jqueryhtmlcss

issues with jquery functionality on user control page

For searching through dropdown lists in my project, I have implemented the Chosen jQuery plugin. In the Master page before the closing body tag, ensure to include the necessary CSS and jQuery script files. <link href="/assets/css/chosen.css" rel=" ...

javascriptjqueryhtmlcss

Can someone help clear up this confusion with CSS?

Why is image 6.png selected, when all the images are direct descendants of the div shape? Thank you for your assistance, it's greatly appreciated. As far as I know, it should select all the divs because they are all direct descendants of the div #shap ...

javascripthtmlcss

The relationship between elements and text input positioning

I am faced with a unique challenge. As a user types in an input field, I need to display a reset button positioned center right of the input. I must adhere to the current HTML structure for the label, input, button, and error message and I prefer not to r ...

htmlcss

Optimizing font size and placement with media queries

I am looking to scale some text and position it over an image on mobile devices. <style> #rcontainer { height: 340px; width: 100%; position: relative; } .rtext span { position: absolute; bottom: 130px; font-family: "Geo ...

cssresponsive-designposition

Easy Div Centering with jQuery Toggle for Internet Explorer 6

Press the button to center the div, press it again to align it to the left. This feature is compatible with all browsers except for IE6, which does not support margin: 0 auto;. How can I find a solution to this issue? The width of the div is not fixed and ...

javascriptjqueryhtmlcss

How come certain rectangles vanish when one rectangle completely fills the space?

Currently, I am encountering an issue with CSS paint worklet and I am trying to determine if it's a browser bug or an error on my end. In the worklet, I am drawing multiple rectangles. Strangely, when one rectangle covers the entire area, the others s ...

javascriptcssdevicepixelratiocss-houdinicss-paint-api

Inject $scope into ng-click to access its properties and methods efficiently

While I know this question has been asked before, my situation is a bit unique. <div ng-repeat="hello in hello track by $index"> <div ng-click="data($index)"> {{data}} </div> </div> $scope.data = function($index) { $scope.sweet ...

javascriptangularjshtmlionic-framework

Can I use Javascript to access a span element by its class name?

Similar Question: How to Retrieve Element By Class in JavaScript? I am looking to extract the text content from a span element that does not have an ID but only a specific class. There will be only one span with this particular class. Can anyone guide ...

javascripthtml

HTML5 Division Element Dimensions

I am currently modifying an HTML5 template. The default Bootstrap parameters were set as: col-sm-12 col-md-4 col-lg-4 col-sm-12 col-md-8 col-lg-8 This configuration allotted 20% of the screen width to text and 80% to images, but I want it reversed. Tex ...

csshtmltwitter-bootstrap-3

Quick and hassle-free form editing is a breeze with our user-friendly platform

Currently, the forms I have require certain files to be filled out before the submit button can be clicked. What I need is for the 'Title' field at the top of the list to also be marked as required. I know how to accomplish this for text fields, ...

htmlformsrequired-field

Styling elements using flexbox and various other divs

Looking to style a webpage with CSS to achieve this particular layout: https://i.sstatic.net/K3x0A.png The objective is to make the page responsive where the red and blue columns (left and right) have fixed widths. The center column should be collapsible ...

htmlcssflexboxresponsive-design

Challenges in Maintaining the Integrity of HTML5 Semantic Tags (article, footer, header)

When it comes to the new layout tags in HTML5, how effectively do they degrade? What risks are involved in using them? (I'm excluding <video>-- as I've come across specific fallback code for it). For instance, consider the following snippe ...

htmlcross-browser

IE browser transparency effect on canvas

I have encountered an issue when drawing a shape on canvas using kineticJS and setting the fill to none. The code snippet I am using is below: var rect = new Kinetic.Path({ x: 0, y: 0, data: 'm 2.0012417,2.0057235 ...

javascripthtmlcanvastransparencykineticjs