Adjust the size of an SVG to perfectly fit within a designated div

I've looked through several discussions here, but none of the suggested solutions seem to work for my specific situation.

My issue involves an SVG that was created on a different website. It contains three elements, and I'd like to embed it while centering it within a div and ensuring it occupies around 80% of the div's width while preserving its aspect ratio.

I attempted to use a logo class by applying it to both the SVG and the div, but unfortunately, the SVG does not resize as expected. Being new to embedding SVGs, I suspect I may have overlooked something straightforward. Any guidance or suggestions would be greatly appreciated.

HTML:

<div class="logo">
<svg viewBox="0 0 100 100" height="125.10821574604812" width="386" style="width: 386px; height: 125.108px; display: inline-block;">
  <g id="SvgjsG1007" featurekey="symbolFeature-0" transform="matrix(0.24606297734400367,0,0,0.24606297734400367,-0.99212501603224,-0.46136984249956975)" fill="black">
    <path xmlns="http://www.w3.org/2000/svg" d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"></path></g>
    <g id="SvgjsG1008" featurekey="textGroupContainer" transform="matrix(1,0,0,1,385,15)" fill="black">
      <rect xmlns="http://www.w3.org/2000/svg" y="0" height="1" width="1" opacity="0"></rect><rect xmlns="http://www.w3.org/2000/svg" y="0" x="-265" width="3" height="96"></rect></g>
      <g id="SvgjsG1009" featurekey="vMvB0T-0" transform="matrix(2.9018419606484582,0,0,2.9018419606484582,135.09815803935155,27.97299999605343)" fill="black">
        <path d="M1 20 l0 -8.4 c0 -5.58 0 -7.78 3 -7.78 s3 2.2 3 7.78 l0 8.4 l-2 0 l0 -4.6 l-2 0 l0 4.6 l-2 0 z"></path></g>
        </svg>
  </div>

CSS:

.logo {
  width: 80% !important;
  align-content: center;
}

Snippet - the SVG doesn't resize no matter the size set inside the div:

.logo {
  width: 80% !important;
  align-content: center;
}
<div class="logo">
<svg viewBox="0 0 100 100" height="125.10821574604812" width="386" style="width: 386px; height: 125.108px; display: inline-block;">
  <g id="SvgjsG1007" featurekey="symbolFeature-0" transform="matrix(0.24606297734400367,0,0,0.24606297734400367,-0.99212501603224,-0.46136984249956975)" fill="black">
    <path xmlns="http://www.w3.org/2000/svg" d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"></path></g>
    <g id="SvgjsG1008" featurekey="textGroupContainer" transform="matrix(1,0,0,1,385,15)" fill="black">
      <rect xmlns="http://www.w3.org/2000/svg" y="0" height="1" width="1" opacity="0"></rect><rect xmlns="http://www.w3.org/2000/svg" y="0" x="-265" width="3" height="96"></rect></g>
      <g id="SvgjsG1009" featurekey="vMvB0T-0" transform="matrix(2.9018419606484582,0,0,2.9018419606484582,135.09815803935155,27.97299999605343)" fill="black">
        <path d="M1 20 l0 -8.4 c0 -5.58 0 -7.78 3 -7.78 s3 2.2 3 7.78 l0 8.4 l-2 0 l0 -4.6 l-2 0 l0 4.6 l-2 0 z"></path></g>
        </svg>
  </div>

htmlcsssvg

Answer №1

Initially

  • To start, you should eliminate the inline style from the <svg> tag as it will take precedence over any CSS settings

  • Next, specify <svg viewbox="0 0 386 126">` to define the width and height based on the path

Subsequently

  • either use 
    <svg width="100%" height="100%">
  • or remove those attributes entirely from <svg> and assign them in a CSS declaration.

.logo {
  width: 80%;
  margin: 0 auto /* centering within parent */
}
<div class="logo">
    <svg viewBox="0 0 386 126" width="100%" height="100%">
      <g id="SvgjsG1007" featurekey="symbolFeature-0" transform="matrix(0.24606297734400367,0,0,0.24606297734400367,-0.99212501603224,-0.46136984249956975)" fill="black">
        <path xmlns="http://www.w3.org/2000/svg" d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"></path></g>
        <g id="SvgjsG1008" featurekey="textGroupContainer" transform="matrix(1,0,0,1,385,15)" fill="black">
          <rect xmlns="http://www.w3.org/2000/svg" y="0" height="1" width="1" opacity="0"></rect><rect xmlns="http://www.w3.org/2000/svg" y="0" x="-265" width="3" height="96"></rect></g>
          <g id="SvgjsG1009" featurekey="vMvB0T-0" transform="matrix(2.9018419606484582,0,0,2.9018419606484582,135.09815803935155,27.97299999605343)" fill="black">
            <path d="M1 20 l0 -8.4 c0 -5.58 0 -7.78 3 -7.78 s3 2.2 3 7.78 l0 8.4 l-2 0 l0 -4.6 l-2 0 l0 4.6 l-2 0 z"></path></g>
    </svg>
</div>

Answer №2

If you're utilizing tailwind, make sure to include the scale-100 class.

scale-100 = transform: scale(1);

For example:

<figure>
  <img className="scale-100 w-16 h-16" src={/img.svg} alt='SVG Image'/>
</figure>

The equivalent in CSS would be:

.svg_img {
  transform: scale(1);
  width: 10rem;
  height: 10rem;
}

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

Discovering Unnecessary CSS & JS Code

Currently, I am tackling a freelance project focused on upgrading a website. The client is requesting specific features from their old site be replicated on the new one. However, the challenge lies in the fact that the old site's CSS and JS are consol ...

javascriptcssoptimization

angularjs issue with displaying data in ui-grid

Seeking assistance on implementing data display using ui-grid. Currently facing an issue where the grid is not showing any data, although when using a table with <tr ng-repeat="transaction in savingaccountdetails.transactions>, the data is displayed ...

angularjshtmlui-grid

The hover effect is not activated by the mouse movement event

I previously encountered an issue related to flickering with an absolute div when moving my mouse, which I managed to resolve by increasing the distance between my mouse pointer and the div. Now, I am working on the next phase of my project: My goal is t ...

javascriptjqueryhtmlcss

Verifying if a specific class input exists within a table using JavaScript

Issue Description: I currently have a table with x number of rows and y number of columns. The structure of most rows contains similar inputs in terms of class and type, but not all of them. I perform calculations on the entire table using JavaScript bas ...

javascripthtmlasp.net

Show a pop-up notification for a compact disc

Received a CD containing various tutorials created in HTML. I am looking to have a browser window open with specific parameters, such as no toolbars and fixed width/height, to properly display the content. Using window.open with multiple parameters trigge ...

html

Tailwind CSS experiencing issues with custom color options and dark mode functionality

For my personal project, I am utilizing tailwind CSS and I would like to incorporate custom colors. Currently, I am using the hover:text-[#007560] trick, but I believe it would be more convenient if I could have my entire color palette defined in the tailw ...

cssvue.jsvuejs3tailwind-css

Issues with screen scrolling becoming stuck in React and Material UI

Currently facing an unusual issue where scrolling on my mobile website becomes sticky, with intermittent responsiveness to touch. Struggling to identify the root cause as there are no console errors detected. Provided below is a snippet of code for a subse ...

htmlcssreactjsmaterial-ui

Custom control unable to display MP3 file

Hey, I came across this awesome button that I am really interested in using: https://css-tricks.com/making-pure-css-playpause-button/ I'm currently facing two issues with it. First, I can't seem to play the sound. I've placed the mp3 file ...

javascripthtmlcssmp3

What is the best way to conceal a dropdown menu when the page first loads?

I have a dropdown menu that is displaying like this: <ul> <li class="dropdown open"> <a aria-expanded="true" href="#" class="dropdown-toggle waves-effect waves-button waves-classic" data-toggle="dropdown"> <spa ...

javascriptjqueryhtmlcssdrop-down-menu

Unable to reach the top while perfectly centered

I am currently struggling to create a perfectly centered popup menu that allows me to scroll all the way to the top. It seems like the transform property only affects visuals, so even though #content is set to top: 50%, I can't see everything at the t ...

javascripthtmlcss

Using the Match() function with an array of objects

I am working with an object array containing multiple variables. let Novels = []; class Novel { constructor(isbn, title, author, edition, publication, year) { this.isbn = isbn; this.title = title; this.author = author; this.publicat ...

javascripthtmlarraysstring

IonTabButton not responding to onClick events

Currently, I am utilizing the Ionic 5 CSS library in combination with React. I found that IonTabButtons have a more appealing style compared to IonButtons because IonTabButton allows for text below the Icon. In the screenshot provided, all icons are displ ...

cssreactjsionic-frameworkionic5ionic-react

Utilize the identical button and modify the text displayed on it for implementing my jQuery function that toggles visibility

Is there a way to modify my current jQuery function for displaying and hiding a contact form using the same button? Currently, I have two buttons that toggle the visibility of the form: "Write me" shows the form on click and changes to "I don't want ...

jqueryhtml

Unusual problem arises with the positioning of widgets in Blogspot due to the use of CSS `position

Recently, I implemented a new widget on my blog called , which functions as a menu using the "Add HTML/Script" feature. Below is the HTML/CSS code for the widget: .menukadn { line-height: 1; } a.limeka, a.limeka:visited, a.limeka:active { font-family: ...

cssgoogle-chromewidgetbloggercss-position

Error Alert: Express configuration encounters Unforeseen character <

This is how I have set up my Express: const express = require('express'); const app = express(); app.use(express.static('public')); app.get('*', function (req, res) { res.sendfile('dist/index.html'); }); app.li ...

javascripthtmlexpress

Troubleshooting a Hover Problem in Firefox

Chrome is rendering the following code perfectly fine, but Firefox seems to be having trouble applying the hover effect. HTML <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> ...

htmlcssgoogle-chromefirefox

Is it possible to utilize a CSV file to dictate which images should be utilized on my website as a guide?

I'm currently working on my website's gallery and have a collection of over 60 images. I'm exploring ways to streamline the process of displaying these images by having the website read their names from a CSV file instead of manually coding ...

javascriptphphtmldatabasecsv

Error encountered in PHP due to a spacing issue in the GET

<?php $current_subject = $_GET['subject_id']; $current_content = $_GET['note_id']; echo "<form method=\"post\" action=mainpage.php?subject_id=".$current_subject."&note_id=".$current_content.">"; ?> <in ...

phphtmlget

Adding <meta> tag to the <head> section of a particular page in WordPress and HTML

I need to insert a meta tag for the site description within the head section of a specific page, before the opening body tag. The website is created using WordPress & Elementor. I prefer not to include it globally in the theme's header option like sh ...

phphtmlwordpressmetaelementor

Tips for maintaining the active state of an Accordion during a page refresh in Bootstrap

I've got this snippet for an Accordion. It's functioning properly, but I'm struggling to keep the selected tab active after a page refresh. The added JavaScript isn't working and I can't pinpoint the exact issue. <div class=&quo ...

javascripthtmlbootstrap-4accordion