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

methods for transferring javascript variables to modal

<div> <h5> <a href="<?php echo base_url(); ?>/vendor/home/projects" >Return to Projects</a> </h5> <div> <div class="container"> <div class="row"> ...

javascriptphpjqueryhtmlcss

Struggling to change h2 style on WordPress?

In a WordPress page, I create three heading texts and adjust the CSS when the screen width is less than 820px. Here is the code snippet: <h1 class="block-h1">Heading 1</h1> <h2 class="block-h2">Heading 2</h2> <h3 class="block-h3 ...

csswordpress

Identify the geometric figure sketched on the canvas using the coordinates stored in an array

After capturing the startX, startY, endX, and endY mouse coordinates, I use them to draw three shapes (a line, ellipse, and rectangle) on a canvas. I then store these coordinates in an array for each shape drawn and redraw them on a cleared canvas. The cha ...

javascripthtmlcanvas

Can variables be transmitted through Real-Time Communication in JavaScript?

Currently, I am in the process of developing a multiplayer game using three.js. The basic framework is all set up and my next step is to implement the multiplayer aspect. After some research, I came across RTC as a solution that doesn't require comple ...

javascripthtmlvariablesjsfiddlechannel

Animating several elements by toggling their classes

I'm struggling to implement smooth animations on this box. I've tried using 'switchClass' but can't seem to keep everything together. Any help would be greatly appreciated. Here is the code snippet for reference: <script src=" ...

javascriptjqueryhtmlcssanimation

Changing CSS image properties: A step-by-step guide

I've come across a strange conflict between Twitter Bootstrap (2.2.1) and Ad-Gallery in Internet Explorer. It seems that certain lines in bootstrap.min.css are causing issues, preventing images from displaying: img{max-width:100%;width:auto\9;h ...

csshtmloverriding

Getting an input value dynamically in a React variable when there is a change in the input field

I am having an issue with my search text box. I need to extract the value onchange and send a request to an API, but when I try using the normal event.target method, it shows an error. How can I fix this? The problem is that onchange, I need to call a func ...

javascripthtmlreactjs

Is it necessary to download and install plotly if I am using the cdn in my HTML file?

I'm currently developing an online application using Flask. The user input is collected with d3.js and sent to app.py, where it is used for an API call to retrieve the necessary data. This data is then returned in JSON format to JavaScript for renderi ...

javascriptpythonhtmlflask

Creating Sleek Rounded Corners with Pure CSS in Older Versions of Internet Explorer (Compatible with jQuery)

Looking for a seamless solution to render rounded corners on browsers that do not support CSS3 without the delay typically seen with JQuery plugins. The use of .htc files with www.css3pie.com seems like the best option so far, but there is still a delay c ...

jqueryinternet-explorercss

What is the typical method for preserving a specific gap between two lines when the line spacing surpasses the margin?

My workplace provided me with a wireframe that looks like this: Description of the image above: Maintain a margin of 10px between the lines and utilize the specified css class .font16. This is what the .font16 class contains : .font16{ font-size: 16px; ...

htmlcssmarginline-height

"Using jQuery to target elements in the HTML Document Object Model

Is there a way to retrieve the outer HTML of a selected object using jQuery? For instance, if I have: $("#test.test_class") how can I convert it into an HTML string like this: <div id="test" class="test_class"></div> If anyone knows how to ...

jqueryhtml

Changing the Displayed Content with a Simple Click of a Link

Layout Overview In the process of developing a tool to streamline work tasks, I want to ensure that I am following best practices. My goal is for the website to initially display only column A, with subsequent columns generated upon clicking links in the ...

javascriptjqueryhtmlcss

Hide panel when button is clicked - bootstrap

Is it possible to make a panel collapse by clicking a regular bootstrap button? Below is the code snippet: <div class="panel panel-primary" style="border-color: #464646;"> <div class="panel-heading" style="border-color: #BBBBBB; height: 35px; ...

javascripthtmltwitter-bootstrapangular

Is there a way to specify the dimensions of the canvas in my image editing software based on the user-input

Here is the code and link for my unique image editor. I would like to allow users to enter the desired width and height of the selection area. For example, if a user enters a width of 300 and height of 200, the selection size will adjust accordingly. Addit ...

javascriptjqueryhtmlcss

What is the best way to have an HTML radio button automatically display as selected upon loading if the stored value is "on"?

Utilizing Javascript alongside html: I am facing an issue where a list containing radio buttons is dynamically loaded based on stored data when the page launches. Despite the stored value of the radio being set to "on", the radio button does not show up a ...

javascriptjqueryhtml

Retrieve items from the parent row of selected checkboxes

Within my table, I have the following row. <tr class="data_rows" ng-repeat='d in t2'> <td class="tds"> <input class='checkBoxInput' type='checkbox' onchange='keepCount(this)'></td> &l ...

javascripthtmlangularjs

The ultimate guide to disabling iframe scrolling on Internet Explorer 8

After extensively searching for a solution, I realized that most answers focused on removing scrollbars rather than completely preventing the page from scrolling. My issue involves embedding an index.php file in an iframe on my website. Within the index.ph ...

htmliframescroll

I struggled to insert a horizontal scrollbar into the iframe

In the process of constructing a family tree, I am utilizing lists as elements to create the structure. However, I am encountering an issue when the tree grows larger - no horizontal scrollbar is appearing. I have attempted to use iframe and CSS to manage ...

htmlcssiframe

Enhance your message inbox experience with jQuery/Javascript features inspired by Gmail, including the ability to select all messages with a checkbox and

It is truly satisfying to be here working on developing a private message inbox for my website, especially after successfully implementing a complete user signup/login and activation system. A few months ago, I never believed I had enough patience to grasp ...

phpjavascriptjquerymysqlhtml

Generating HTML table rows dynamically from objects using Angular's ng-repeat functionality

In my Node-RED setup, I am utilizing the HTML angular code within a "template" node. Within my system, I have an object that consists of circuit boards distinguished by serial numbers. Each circuit board is equipped with two channels, each having its own ...

htmlangularjsobjectnode-red