SVG's height attribute not adjusting properly

I am currently working on implementing an SVG sprite sheet using the "symbol" method outlined here.

My HTML code is quite straightforward.

<svg><use xlink:href="/images/iconSprite.svg#camera"/></svg>

Below is a sample symbol extracted from the SVG file:

<symbol viewBox="0 0 24 24" id="clock"><g transform="translate(0 -1028.4)"><path d="M22.085 1035.955 ... </g></symbol>

The issue I am encountering is that setting the width of the SVG element to 64px automatically adjusts the height to 150 pixels. Despite trying different CSS options like height:auto; and height:100%;, the desired aspect ratio is not maintained. I prefer to avoid setting a fixed height (e.g., height:64px;) due to varying icon dimensions. Ideally, the SVG should scale proportionately based on the original aspect ratio, such as a 4:3 icon adjusting to 300px height if the width is set to 400px.

While I've researched scaling SVGs with aspect ratio preservation, most solutions focus on IMG elements rather than inline SVGs or external SVGs used with USE tags.

If anyone has insights into achieving cross-browser compatibility, including IE9+ and Android 4.0+, for dynamically scaling SVGs while maintaining aspect ratio, your input would be greatly appreciated!

csssvgaspect-ratio

Answer №1

DEMO

In order to ensure proper scaling of elements within an SVG document, it is important to define a viewBox for each element being linked to. Since there can be multiple elements in one SVG document, removing the viewBox from the linked element and adding it to the referencing element is necessary.

One recommended approach is to include the viewBox within an svg element like this:

<svg class="sample" viewBox="0 0 25 25">
    <use xlink:href="/images/iconSprite.svg#clock"/>
</svg>

By setting the css width, you can easily scale the element:

.test {
    width: 50px;
}

The display will adjust as long as it fits within the specified height or width. For responsive design, scaling by percentage length can be achieved with:

.test { width:30%; }

For more information on scaling SVG using CSS, check out this helpful article from CSS-tricks: SCALE SVG

Answer №2

Previous iterations of Safari, along with outdated Android browsers, required more than just setting the viewbox and width.

In my particular case, I found that it was necessary to also include height:100% in addition to width.

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

Mobile display exhibiting glitches in animation performance

I have implemented an animation in the provided code snippet. const logo = document.querySelector('.logo'); const buttons = document.querySelectorAll('.loadclass'); const html = document.querySelector('html') const cornerme ...

javascripthtmlcss

Make sure to consistently show the rating bubble within the md-slider

I am currently exploring the functionality of md-slider in its md-discrete mode. However, I would like to have the slider bubble always visible on the screen, similar to this: I do not want the slider bubble to disappear when clicking elsewhere. Is there ...

angularjscssangular-material

Problem with image title in jQuery mobile

My code seems to be having an issue where the title does not display completely when hovering over it. For example, if the title is set as "The Value", only "The" is shown and not "The Value". Can anyone help me identify the mistake? Thank you in advance ...

javascriptjqueryhtmlcssjquery-mobile

Combine jQuery and CSS to create a scrollable and extended fixed header

I am experiencing an issue where the header is fixed when scrolled down, but when I scroll back up to the top, it detaches and becomes unfixed again. How can I make the header stay fixed for a prolonged period of time? Are there any specific adjustments I ...

jquerycss

Creating dynamic movement on webpages using CSS3 Animations

Exploring the world of CSS animations is such a blast! I've created this fiddle to play around with the concept of wheels on a bus. Check out my JS Fiddle here One strange thing I noticed is that sometimes there's a white space between the two ...

csscss-animations

What is the best way to insert a <dv> element following a <Typography> component in the provided code?

After learning React, I have attempted in various ways to get this code snippet to work. I referred to a question on Stackoverflow as well as the HTML div documentation The goal is to have the text and link displayed in a horizontal line, not vertically s ...

cssreactjsmaterial-ui

Can I use jQuery to disable all elements within a div, including anchor and paragraph tags?

Can anyone offer assistance with HTML and CSS? I am trying to disable all content inside a div that has the class "main-wrapper" when a user clicks on a logout button using a jQuery function. I have attempted two methods, but so far without success! funct ...

jqueryhtmlcssjquery-ui

Looking for assistance with my website's navigation bar and logo

Looking for assistance in moving my navigation buttons to each side of the logo. As a beginner in web design and CSS, I've been struggling with this task. Essentially, I want the "home" and "about" buttons on the left side of the logo, 16px apart from ...

htmlcssnavigationmargingraphical-logo

How do I customize the border color for the Select component in Material UI?

I have been working on customizing the Select component provided by Material UI. Here is a visual representation of what it currently looks like: https://i.stack.imgur.com/YGheB.png My goal is to change the border-color of the select component from the ...

cssreactjsmaterial-ui

Creating a mockup for a website design project in my class, utilizing HTML and CSS. Encountering issues with the CSS not displaying correctly, unsure of the root cause of the problem

Check out this wireframe design I created: https://i.stack.imgur.com/Ro3dl.png I'm working on translating this into HTML and CSS so that I can further develop it. The HTML Code: <!doctype html> <html> <head> <title> Trinit ...

htmlcsslayoutwireframe

Guide on inserting a dropdown menu following a specific count of <li> elements using Javascript or Jquery

I am currently working on an HTML project <div class="ktmsg"> <ul> <li class="a1"> <a title="Link Tools" href="#"> … </a> </li> <li class="a2"> <a title="Link Tools" href="#"> ...

javascriptjqueryhtmlcss

What is the best way to place a list within a <div> element?

There is a <div> with an image in the background. I now want to include a list within that div, but I'm having trouble positioning it. Check out this image for reference In the image above, you can see the background and the list, but I'm ...

htmlcss

Images in the navigation bar are bouncing around on the page, even though the CSS and HTML configurations

We are experiencing some erratic behavior with our nav bar images that seems to occur only on page refreshes. The issue appears to be related to the loading of our sprite, which contains all the images for the nav bar links. Despite trying different float ...

csshtml

Creating a Full Screen Image with HTML and CSS

On my current web project, I am aiming for an immediate impact with a full-screen image that transitions to reveal text and information when the user starts scrolling. The challenge lies in ensuring this effect is consistent across various screen resolutio ...

csshtmlgoogle-chromeweb

Unusual CSS inconsistencies between running on VS Web Server and IIS

My current dilemma involves a discrepancy in the appearance of my site when viewed locally through the visual studio web server (http://localhost:3452/) compared to when accessed on IIS7 (http://server/myproject/). Initially, I suspected a CSS issue causi ...

htmlcssvisual-studiobehavior

Is there a way to include captions within a bootstrap carousel-item without compromising the responsiveness and alignment of the indicators and controls?

<div id="myUniqueCarousel" className="carousel slide" data-bs-ride="true"> <div className="unique-carousel-indicators"> <button type="button" data-bs-target="#myUniqueCarousel" data-bs-slide-to="0" className="active" aria-curre ...

htmlcssbootstrap-5

Ensure that the spacing between rows matches the spacing between columns

I am working on creating a 3x3 grid using Bootstrap. My goal is to have consistent spacing between the rows and columns. How can I achieve this effectively? ...

htmlcsstwitter-bootstrap

React - Next Blog: Issue with empty lines displaying on the browser

Currently, I am developing a blog that retrieves data from Mongo Atlas. The blog is built using Next.js version 9.5.4 and is hosted on Vercel. The blog page utilizes static props and regeneration. The data is fetched in JSON format and then stringified fo ...

htmlcssreactjsclassnext.js

Troubleshooting Boostrap Check Box Styling Problem in MVC 5

My registration form has a problem with the checkbox's alignment. I want the text to appear to the left of the checkbox, in line with the placeholders for the input fields on the page. Currently, the text is either above the checkbox (centered in its ...

csshtmlasp.net-mvc-5

What is the proper HTML tag and syntax used for adding a text box within the content of a webpage?

Question about HTML: How can I add a text box or block to an HTML page that is filled with plain text? I want the text box to align to the right and be surrounded by the plain text, essentially wrapping around it. I also need to specify the dimensions of ...

htmlcss