What is the best way to resize an SVG to perfectly fit the parent div container?

I need to display multiple SVGs from various sources, each with different height, width, and viewbox. I want them all to render within a fixed height and width div, filling up the available space. How can I scale these SVGs to fit the container div?

For instance, in the code snippet below, I aim to have both SVGs fill a 'parent' div that is 100*100px. You can find the corresponding fiddle link here.

   <!DOCTYPE html>
    <html>
    <head>
      <meta name="description" content="ES6 in Action: New String Methods [3]">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
    </head>
    <body>
      
      <div class='parent'>
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="50" width="50" x="0px" y="0px" viewBox="0 0 386.972 386.972" style="enable-background:new 0 0 386.972 386.972;" xml:space="preserve">
        <path d="M25.99,0v386.972l334.991-193.486L25.99,0z M55.99,51.972l245.009,141.514L55.99,335V51.972z" />
    </svg>
      </div>
      
      <div class='parent'><svg viewBox="0 0 64 64" width="20px" height="20px" class="data-ex-icons-save " style="fill: currentcolor;"><path d="M49.26,56.17H14.74a6.91,6.91,0,0,1-6.91-6.91V32a3.45,3.45,0,1,1,6.91,0V49.26H44.81,24.08a3.5,3.5,0,0,1-4.9,0l-4.45-4.45V35.44a3.44,3.44,0,0,1-6.91,0V19.62l-4.45,4.45a3.5,3.5,0,0,1-4.9,0,3.44,3.44,0,0,1,0-4.87L29.55,8.85a6,6,0,0,1,.52-.45,2.61,2.61,0,0,1,.62-.31,3.45,3.45,0,0,1,2.62,0,2.61,2.61,0,0,1,.62.31,6,6,0,0,1,.52.45L44.81,19.21A3.44,3.44,0,0,1,44.81,24.08Z"></path></svg></div>
    </body>
    </html>

javascripthtmlcsssvg

Answer №1

Adjust the width of your SVG to 100% and delete the height attribute:

<svg width="100%">

Answer №2

Remove the fixed width and height in this example, allowing the SVG to stretch automatically:

    <!DOCTYPE html>
    <html>
    <head>
      <meta name="description" content="ES6 in Action: New String Methods [3]">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <style>
    .parent {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  object-fit: contain;
    }</style>
  
      <div class='parent'>
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 386.972 386.972" style="enable-background:new 0 0 386.972 386.972;" xml:space="preserve">
        <path d="M25.99,0v386.972l334.991-193.486L25.99,0z M55.99,51.972l245.009,141.514L55.99,335V51.972z" />
    </svg>
      </div>
      
      <div class='parent'><svg viewBox="0 0 64 64" class="data-ex-icons-save " style="fill: currentcolor;"><path d="M49.26,56.17H14.74a6.91,6.91,0,0,1-6.91-6.91V32a3.45,3.45,0,1,1,6.91,0V49.26H49.26V32a3.45,3.45,0,1,1,6.91,0V49.26A6.91,6.91,0,0,1,49.26,56.17Z"></path><path d="M44.81,24.08a3.5,3.5,0,0,1-4.9,0l-4.45-4.45V35.44a3.45,3.45,0,0,1-6.91,0V19.62l-4.45,4.45a3.5,3.5,0,0,1-4.9,0,3.44,3.44,0,0,1,0-4.87L29.55,8.85a6,6,0,0,1,.52-.45,2.61,2.61,0,0,1,.62-.31,3.45,3.45,0,0,1,2.62,0,2.61,2.61,0,0,1,.62.31,6,6,0,0,1,.52.45L44.81,19.21A3.44,3.44,0,0,1,44.81,24.08Z"></path></svg></div>
    </body>
    </html>

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

Using jQuery to replace the value of a button with a variable string that has been concatenated

I am facing a dilemma with a button on my webpage. The value displayed on the button is a combination of variables and strings, like so: $('#btn1').attr('value','question'+currid+'ans1').button('refresh'); ...

javascriptjqueryvariablesbuttonjquery-mobile

When making a Post Request, the Req.body is found to be empty

Here is the code snippet from various files: In App.js file: app.use(express.json({limit:"30mb",extended:true})); app.use(express.urlencoded({extended:true})); In route.js file: router.route("/register").post(registerUser) Importin ...

javascriptnode.jsexpresstestingbackend

The MessageError: expressjs is unable to read the property "image" because it is null

I am currently working on developing a shopping cart using express and mongodb. However, I encountered an error when attempting to include an image category in the form. Here is the code snippet for handling post requests in admin_product.js: router.post(& ...

javascriptnode.jsexpress

Why does my script seem to be missing from this GET request?

Encountering an issue while setting up a page using npm and grunt. Request URL:http://localhost:9997/bower_components/requirejs/require.js Request Method:GET Status Code:404 Not Found The problematic html code is as follows: <script> ...

javascriptnpmgruntjs

Utilizing jQuery to retrieve multiple values from a select box through the onchange event

I have two select boxes with JavaScript on them. When I use filter1, my URL changes to www.url.com/&filter[]=6827 and it works perfectly. The selected option also works without any problems. However, I want a new select box like filter2 with multiple f ...

javajqueryhtmldrop-down-menujquery-selectbox

PHP mail function does not properly align HTML table outputs

After fetching data from the database and inserting it into an HTML table, everything appears fine. However, upon pressing the send button to email the content, sometimes the alignment of the HTML table is disrupted in the email. It seems like specific col ...

phphtmlcssphpmailer

What is the correct method to include basic authentication headers in a post request for retrieving HTML content?

One of the projects I'm currently working on involves a POST endpoint that is protected by basic auth and returns an HTML form. This particular endpoint is hosted using an express server and secured with passport's basic auth. My goal is to creat ...

javascripthtmlexpresspost

The functionality of the onclick and onserverclick attributes seem to be malfunctioning when

I am in the process of creating a basic login screen using the code provided below: <form id="login"> <div class="formHeader"> <h1>Login</h1> </div> <div class="formDiv"> <input type="text" placeholder="Email" na ...

c#htmlasp.net

Increase the time of a Date by 10 seconds

Is there a way to increase the time of a JavaScript date object by 10 seconds? For example: var currentTime = new Date(); var currentSeconds = currentTime.getSeconds() + 10; currentTime.setSeconds(currentTime.getSeconds() + currentSeconds); ...

javascript

Reasons why Custom CSS won't function simultaneously with Bootstrap 5

I recently designed a dashboard using bootstrap 5. While working on this project, I found myself in need of a custom CSS style in addition to the default bootstrap styles. However, I encountered an issue where my custom CSS would not apply properly unles ...

htmljquery-uicss-selectorsbootstrap-modalbootstrap-5

Errors are encountered when attempting to use `usePathname()` and `useRouter()` functions. `usePathname()` returns null while `useRouter()` causes errors stating "NextRouter not mounted" and "invariant

I'm encountering an issue with implementing active navlinks in NextJS version 13.4.4. I need to access the current URL for this solution, but every attempt ends up failing. My folder structure is organized as follows: .next components Header header ...

javascriptnode.jsreactjsnext.jsnavbar

Having trouble identifying the data variable. Uncaught ReferenceError: edu_id has not been defined

How can I successfully pass the edu_id from an AJAX request to my Laravel controller? Utilizing anchor tags <a href="javascript:void(0);" onclick="showEditEducation(some_specific_id);" title=""><i class="la la-pencil"></i></a> Im ...

javascriptajax

Is there a way to directly access the React component that was clicked?

I'm looking to dynamically change the class of a component when clicked. By using state to create a new component with properties such as name and done (initiated as false), which are then added to the todos array, I want to find out how to identify t ...

javascriptreactjsreact-hooksjsxreact-state

Is there a way to insert a button within a table that will allow me to easily insert new rows and columns?

<head> No content available at the moment. <!-- Here is my code --> <h1>Reserve Your Hall Form</h1> <form class="form-horizontal"> <table class="form-group table table-bordered table-hover"> ...

htmlasp.net-web-apiangular-ui-bootstrapbootstrap-4angular2-forms

Can someone assist me in creating a clickable link that opens a menu in HTML when clicked?

I have been attempting for the past few days to open the megamenu by clicking on a link, but despite my efforts, I have not been successful. After reviewing some code, I discovered a clue in the CSS. It seems that setting the visibility value to visible wi ...

javascripthtmlcss

Tips on validating multiple forms with the same name in AngularJS

Hello, I am seeking a way to check the validity state of all forms outside of the form tags. For example, if any form is invalid, I want an error message to be displayed. The use of myform.$invalid doesn't seem to work for all forms or update properly ...

javascriptangularjs

How can I target an element with inline styling using CSS?

How can I target headings with inline style 'text-align: center' in my CSS so that I can add ::after styling to them? This is for a WordPress CMS, specifically to modify content in the WYSIWYG editor used by clients. Here's an example of th ...

css

The HTTPOnly cookie is not accessible within the getServerSideProps function in Next.js

Why isn't the jid cookie available in getServerSideProps using Next JS? Here's the scenario: https://i.stack.imgur.com/FLRGk.png The jid cookie is generated by an Expressjs API at https://api-dev.example.com. I'm attempting to retrieve thi ...

javascriptcookiesnext.jshttponly

The contents of the multi-level navigation are automatically shown as the page loads

I've implemented a multilevel dropdown menu on my website using a plugin, and it works as expected. However, there's an issue where the contents of the dropdown menu display for a brief moment while the page is loading. I tried adjusting the posi ...

javascriptjqueryhtmlcss

Ways to monitor the status of a server request using jQuery (ajax)?

I am currently working on a PHP application that involves users submitting forms to the server via ajax (jQuery). The server needs to insert a large number of records into a MySQL database, which may take some time due to various calculations. My question ...

javascriptphpjquerymysqlajax