Adjusting the size of inline SVG elements on the fly

I'm working with an SVG that is being displayed inline like this: 

<div className="app-details__icon-large" dangerouslySetInnerHTML={{__html: svg }} />
. I specifically need to render it this way (not using an img tag or as a background) in order to have the ability to style certain properties within the SVG. While I've been able to successfully style properties not defined within the SVG using CSS selectors, I'm running into issues when trying to set the height and width. The inline height/width properties are overriding my CSS settings. Is there a recommended approach for controlling the height and width of an SVG from CSS when the SVG already has its own dimensions set? Can this be achieved, or if not, what is considered best practice for resizing inline SVGs?

javascripthtmlcsssvg

Answer №1

Eliminate the need for Javascript by inlining SVGs. For instance, you can easily scale a 24px icon to 48px using the following code:

<div class="Icon">
  <svg class="Icon-image" width="24" height="24" viewBox="0 0 24 24">...</svg>
</div>

Styling with CSS:

.Icon {
  width: 48px;
}
.Icon svg {
  width: 100%;
  height: auto;
}

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

Encountering a problem when trying to send an API request to the server in the latest version of

I am a newcomer to NextJS 13 and I am facing an issue with my files in the app. Despite my efforts to look for solutions online and study tutorials to keep up with the latest updates, I have not been successful in resolving the problem. The endpoint I am ...

javascriptnext.jsnext.js13

unique map customized in a separate browser window

Attempting to complete the code provided here but encountering issues as a novice in java-scripting. It seems like the map is not loading correctly. A new tab and text are generated when DIV is created. Seeking assistance on how to open a custom map in a ...

javascripthtmlgoogle-maps

"Enhance Your Searching Experience with Top-Tier AngularJS

Presented below is a dataset: persons = [ { "age":20, "parameter1":94, "name":"Foobarin" }, { "age":33, "parameter1":49, "name":"Johan" } ] I am looking to develop a sophisticated live search functionality that can identify specific ...

javascriptangularjsweb

Receiving a mysterious error despite having everything clearly defined in the JavaScript code

Attempting to create a simple jQuery plugin: HTML: <textarea> <p>Hello World!</p> </textarea> jQuery: $.fn.wysiwyg = function (options) { var e = $(this).replaceWith("<iframe>"); console.log($(this)[0].conten ...

javascriptjqueryhtmljquery-plugins

Refine keys dynamically according to the given input

I'm facing a challenge with an array wherein I need to filter out keys based on an input string. The only constant key is OLD_VAL, while the others are dynamic. Even though I attempted using a variable, it doesn't retrieve that specific key. let ...

javascriptnode.js

Organize unstructured JSON data using a specific method

My service returns a JSON with irregular data structure as shown below: dataFromService: [ { event_data: '2021-03-18T15:20:31.314Z', // if !null = page event_category: 'news', event_title_en: 'page title ...

javascriptvue.js

Server experiencing slow performance with Node.js formidable file uploads

When sending files as form data along with some fields using an http post request in angular.js and receiving file in app.post in node.js, the performance is inconsistent. While local testing shows a fast upload speed of 500 mb/sec with formidable, on the ...

javascriptangularjsnode.jsnginxpm2

Is it possible to link content to various div elements simultaneously?

Trying to explain my query visually, as I'm struggling with how to convey it in words. Feel free to ask for any clarifications! Clarification: In slide one, image 01 and image 02 are initially visible. When someone clicks on the images, the text and ...

htmlcss

value of previous checkbox selection

http://jsfiddle.net/thetylercox/gy8EQ/20/ $(':checkbox').change(function() { if (this.checked) { var lastChecked = $(this).prevAll(":checked:first"); if (this.value == lastChecked.val()) { alert("previous checke ...

javascriptjqueryjquery-events

Tips for calculating the total sum of inner object property values using JavaScript, TypeScript, or Angular 5

What is the total sum of successCount values in the given array object? var successCount;//I want count of all successCount attributes from the below object var accordianData = [ { name: "Start of Day", subItemsData: [ { title: " ...

javascriptangulartypescript

How to automatically switch to the next tab in Bootstrap using JQuery when the video finishes

I recently developed a tabbing system featuring 4 tabs using Bootstrap. While it currently functions manually, I am seeking a way to have it loop automatically upon video completion. Below is my current code: <div id="tab"> <ul class="nav nav ...

jqueryhtmltwitter-bootstrapjquery-selectors

Achieving Flexbox compatibility with child elements in a horizontal MUI Collapse Component and TransitionGroup transitions: A comprehensive guide

Struggling with incorporating the Collapse + TransitionGroup Component in MUI while trying to make the containers expand using flexbox. <Box sx={{display: 'flex', height: '100vh', width: '100vw'}}> <Box sx={{flex: 1 ...

cssreactjsflexboxmaterial-uicss-transitions

Mailchimp fails to deliver response with a Status code of 404

I attempted to use the mailchimp API to set up a mailing list for my newsletter, but I keep getting a 404 error in response. I have double-checked everything multiple times, and it still shows the 404 error. Perhaps the endpoint is incorrect, even though ...

javascriptnode.jsexpress

Using -moz-transform CSS does not effectively prevent unwanted page breaks when printing in Firefox

I am facing a challenge with printing two tables, named header and details, on separate pages. The structure of the tables is as follows: <table id="header"> <!-- multiple rows here --> </table> <table id="details&quo ...

htmljquerycssfirefox

Revamp HTML <font size=1-7> with the use of CSS or JavaScript

I've been developing a prototype application that incorporates a plugin utilizing the deprecated HTML feature. Can I set custom pixel sizes for each font size ranging from 1 to 7? Currently, I'm contemplating using CSS zoom/scale properties, bu ...

javascripthtmlcssfont-size

determine a button's click event using jQuery text detection

There are three dynamically generated buttons created with a jQuery plugin. <button class="execute">Invoice1</button> <button class="execute">Invoice2</button> <button class="execute">Invoice3</button> I am looking to ...

javascriptphpjquery

Alert when Leaving Page with AJAX Navigation

I need help with adding a confirmation before navigating away from the page I'm currently working on. Here is my general structure: The main page is called componentmanagement.php and it has a loader with functions like this, <li> ...

javascriptjqueryajax

Error: Module 'electron-prebuilt' not found

I am encountering an issue with my Electron app that utilizes Nightmare.js after compiling it into an .exe file using electron-packager. Everything functions properly until I click a button that triggers Nightmare.js, at which point I receive the followi ...

javascriptnode.jselectronnightmare

Here, it is possible for the padding-right value to be equal to zero

I am relatively new to CSS and I am currently in the process of testing and experimenting to better understand how it works. For instance, in the code snippet provided, we see that the selector .box h3 has a padding: 6px 10px 4px 10px;. Therefore, the pad ...

css

There are two Ajax forms on the page, but unfortunately only one of them is functioning properly

I am experiencing an issue with two forms on a single page, where only one form is functioning correctly. Here is the website link for reference - Each form has its own script associated with it. Script 1: <script> $(document).ready(function() { ...

javascriptjqueryajaxforms