What is the best way to ensure an SVG maintains a fluid width while keeping its height constant?

My goal is to achieve the following:

  1. The SVG should dynamically scale its width to occupy 100% of the container's width.

  2. The SVG should either stretch or compress when the container's width changes, specifically affecting the wave drawn with the svg's path.

  3. The SVG's height should remain fixed at 760px. Currently, resizing the container causes a reduction in the SVG's height, which is not desired.

.container {
  width: 100%;
  background: green;
  height: 760px;
}

svg {
 width: 100%;
}

svg path {
 width: 100%;
}
  <div class="container">
    <svg width="1440" height="760" viewBox="0 0 1440 760" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M677.112 54.1657C400.36 -43.9336 110.391 13.291 0 54.1657V760H1440V54.1657C1301.02 95.0404 953.865 152.265 677.112 54.1657Z"
        fill="purple"
      />
    </svg>
  </div>

htmlcsssvg

Answer №1

One way to use the SVG as a background is by setting it on a div and fixing the height of the div while adjusting the background-position property to be at the top.

.container {
  width: 100%;
  background: green;
  height: 760px;
}

.container>div {
  height: 100%;
  background: 
   url('data:image/svg+xml;utf8,<svg width="1440" height="760" viewBox="0 0 1440 760" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M677.112 54.1657C400.36 -43.9336 110.391 13.291 0 54.1657V760H1440V54.1657C1301.02 95.0404 953.865 152.265 677.112 54.1657Z"  fill="purple"/></svg>') top/100% no-repeat, 
    /*cover the bottom part with the same color*/
   linear-gradient(purple, purple) bottom/ 100% calc(100% - 20vw) no-repeat;
}
<div class="container">
  <div>
  </div>
</div>

You can simplify the code by keeping only the container:

.container {
  height: 760px;
  background: 
   url('data:image/svg+xml;utf8,<svg width="1440" height="760" viewBox="0 0 1440 760" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M677.112 54.1657C400.36 -43.9336 110.391 13.291 0 54.1657V760H1440V54.1657C1301.02 95.0404 953.865 152.265 677.112 54.1657Z"  fill="purple"/></svg>') top/100% no-repeat, 
    /*cover the bottom part with the same color*/
   linear-gradient(purple, purple) bottom/ 100% calc(100% - 20vw) no-repeat,
   green;
}
<div class="container">
</div>

Answer №2

If you're looking to make some adjustments to your SVG tag, consider adding preserveAspectRatio="none". While this may slightly affect the positioning, it can serve as a good starting point.

.container {
  width: 100%;
  background: green;
  height: 760px;
}

svg {
 width: 100%;
}

svg path {
 width: 100%;
}
  <div class="container">
    <svg width="1440" height="760" viewBox="0 0 1440 760" fill="none" preserveAspectRatio="none"  xmlns="http://www.w3.org/2000/svg">
      <path
        d="M677.112 54.1657C400.36 -43.9336 110.391 13.291 0 54.1657V760H1440V54.1657C1301.02 95.0404 953.865 152.265 677.112 54.1657Z"
        fill="purple"
      />
    </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

Tips for efficiently moving through divs in a personalized single page application?

Exploring the world of JS frameworks and single page app functionality is a bit of a mystery to me. Currently, I have a pseudo single page app set up without any specific framework in place. The setup involves 3 tabs that toggle visibility for 3 different ...

javascriptjqueryhtmlcssajax

Adding query parameters to the end of every link on a webpage

Wondering how to automatically add GET values to the end of each anchor href on a webpage? For instance, if you input google.com?label=12&id=12 I want to ensure that "?label=12&id=12" gets added to the end of every single href in an anchor tag on ...

javascriptphphtml

What could be causing the misalignment of a button within a Bootstrap navbar?

I'm struggling with aligning the log out button correctly in the navigation bar with a dropdown. I have tried every structure suggested on the Bootstrap documentation page to no avail. Can anyone provide guidance on how to vertically align it properly ...

htmltwitter-bootstrapbootstrap-5

Issues with JQuery script causing inconsistency in checking checkboxes

My code includes two functions designed to check and uncheck all checkboxes with a specific class. Initially, the functions work as expected but upon subsequent attempts to run them, the checkboxes do not function properly. Instead, the HTML code seems to ...

javascriptjqueryhtml

Top div click causes bottom div to slide

I'm currently working on a project that involves using CSS and jQuery, but I've encountered an issue that I haven't been able to solve. Here is the demo link: . When the second div is clicked, why does the third div slide? How can this prob ...

jquerycss

Switching CSS styles - seeking a smoother integration

I have successfully implemented a JS CSS switcher, which works brilliantly. However, I would like it to function more seamlessly. When opening a new page on the site, the default CSS style sometimes flickers briefly before the selected CSS style is reappli ...

javascripthtmlcss

Managing special characters in PHP: Understanding charsets

While working on my website using HTML and PHP, I am having an issue with special characters (Å, Á ...) appearing as on the screen when using the post function. Strangely enough, all other HTML content displays correctly. Any suggestions for a solution ...

phphtml

"Top navigation element and anchors now have a permanent fix in place

Having some trouble with the CSS here - anchor links are getting hidden behind the navigation bar. Any ideas on how to fix this? Do you have a suggestion for making sure the anchor link text is visible just below the navigation bar? /* adjust the style a ...

htmlcss

Changing the Direction of News Ticker Movement from Right to Left

I need to switch the news ticker movement direction from right to left to left to right because I will be using Arabic language, so it is crucial to change the movement direction. Despite trying for several days, I have been unable to find a solution. HTM ...

javascripthtmlcssright-to-left

Looking to display a div with both a plus and minus icon? Having trouble getting a div to show with left margin? Need assistance hiding or showing div text

Can someone please review this source code? Here is the demo link: http://jsfiddle.net/bala2024/nvR2S/40/ $('.expand').click(function(){ $(this).stop().animate({ width:'73%', height:'130px' }); $( ...

javascriptjqueryhtmlcss

Is it possible to directly add a child in HTML from nodejs?

I'm in the process of developing a chat application that requires users to select a room from a list of available rooms stored in <datalist> options, which are fetched from a SQL table on the server. Within my login.html file, users are prompte ...

javascripthtmlnode.jsformsexpress

Trouble opening attached html file with Asp.net and Google Charts integration

I am facing an issue with my Asp.Net page that includes a grid and an image. The image is a Google Charts chart with a URL of approximately 1600 characters. To send this content as an email attachment, I created an .htm file containing the grid and the ima ...

asp.nethtmlgoogle-visualization

When trying to load a php page2 into page1 via ajax, the Javascript code fails to execute

Currently, I am in the process of learning PHP and JavaScript. I have encountered a particular issue with a webpage setup. Let's say I have a page called page1 which consists of two input fields and a button labeled 'Go'. Upon clicking the & ...

javascriptphpjqueryhtmlajax

Exploring the ins and outs of flexbox and utilizing overflow:auto

In my current situation, I have successfully resolved all cases but am now seeking assistance in debugging my mental model. Specifically, I am focusing solely on Chrome for the sake of simplicity. Within my nested "holy grail-ish" flexbox layouts, I have ...

cssflexbox

Positioning pop-up windows using Javascript and CSS techniques

In my web application, there is a search field that allows users to enter tags for searching. The window should pop up directly below the search field as shown in this image: Image I am trying to figure out how the window positioning is actually d ...

javascriptcsshtmlpopup

Creating a dynamic dropdown menu in HTML to showcase a variety of images

I am trying to create a drop down menu where each selection displays multiple elements. For example, if sensor 1 is chosen, I want to show a picture of its location and its address. I am having trouble figuring out how to add these functions to the drop ...

javascripthtml

What causes the timer to pause, and what steps can be taken to avoid it? (Using Javascript with Iframe)

On my website, I have a page where clients must view an advertisement for 20 seconds. The website is displayed in an iframe with a countdown timer above it. I've set it up so that the timer stops when the window loses focus to ensure the client is ac ...

javascripthtmliframetimercountdown

Trying to resolve w3 validator error and warning issues

While checking my HTML code using the W3 validator, I encountered an error and warning message: Line 21, Column 23: The ID menuItem was first used here. <li id="menuItem"><a href="#visit">Ten Places to Visit</a></li> ✉ Line 29 ...

htmlcssvalidation

Having trouble getting your Bootstrap v4 carousel to function properly?

Currently, I have implemented the carousel feature from Bootstrap v4 in a Vue web application. I am following the same structure as shown in the sample example provided by Bootstrap, but unfortunately, it is not functioning correctly on my local setup and ...

javascriptcsstwitter-bootstrapcarouselvue.js

Images in CSS accordion not displaying correctly in WordPress website

It seems like I am overlooking a simple solution here, but it's escaping me. I'm attempting to make a CSS accordion function where each section links to a page. If you want to view the source refer to this link Here is my test site URL: this l ...

htmlcsswordpressimageaccordion