Interactive SVG viewport dimension

Check out my "hamburger button" made in SVG, shown below.

body {
  margin: 0;
  text-align: center;
}

svg#ham-btn {
  margin: 2rem;
  border: 1px solid black;
  fill: #383838;
}
<svg id="ham-btn" width="107.5px" height="80px" viewBox="0 0 80 80" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
  <style>
    #ham-btn {
      cursor: pointer;
    }
    #ham-btn:hover #r1 {
      outline: 1px solid transparent;
      transition: transform 0.2s;
      transform-origin: 50% 50%;
      transform: rotate(37deg) translate(0%, 28.75%) scaleX(1.1);
    }
    #ham-btn:hover #r2 {
      transition: transform 0.2s;
      transform: translate(120%, 0);
    }
    #ham-btn:hover #r3 {
      outline: 1px solid transparent;
      transition: transform 0.2s;
      transform-origin: 50% 50%;
      transform: rotate(-37deg) translate(0%, -28.75%) scaleX(1.1);
    }
    
  </style>
  <rect id="r3" x="0" y="71.25%" width="100%" height="15%" rx="5%" />
  <rect id="r2" x="0" y="42.5%" width="100%" height="15%" rx="5%"/>
  <rect id="r1" x="0" y="13.75%" width="100%" height="15%" rx="5%" />
</svg>

I have a question:

Currently, if I want to resize the button, I need to adjust both the dimensions of the viewport and viewBox manually by the same amount of pixels.

Is there a way to make this more adaptable? Perhaps by setting viewBox as a percentage of the viewport?

Based on the specification, it appears that viewBox can only be a numeric value and cannot be expressed as a percentage.

Any ideas or suggestions are welcome!

Thank you for your input.

Note:

Accessibility and additional features have not been implemented in this button yet. The focus is solely on making it responsive.

Additional Information:

I am aware that I can set the SVG viewport size relative to its container or the browser window.

However, this approach does not resolve my issue since maintaining a fixed ratio between the viewBox and viewport dimensions is crucial for the button's shape retention.

Therefore, my goal was to define the viewBox as a percentage of the viewport.

In case you are curious, here are some key aspects of my current solution:

  • The viewBox is wider than the viewport but shares the same height
  • To horizontally center the rects, the preserveAspectRatio property is utilized
  • Dimensions of the rects are defined in relation to the viewBox

An outline has been added to address jagged lines observed in Firefox after applying transformations.

Edit:

If future visitors find it helpful, the finalized version of the button, including comprehensive accessibility features, can be accessed through this link: https://codepen.io/magnusriga/pen/KrrJKa

htmlcsssvg

Answer №1

To make your SVG responsive, add the width and height properties to your CSS. Set the width and let the height adjust automatically.

body {
  margin: 0;
  text-align: center;
}

svg#ham-btn {
  margin: 2rem;
  border: 1px solid black;
  fill: #383838;
  /* percentage of viewport - height will autocalculate */
  width: 7vw;
  height: auto;
}
<svg id="ham-btn" width="107.5px" height="80px" viewBox="0 0 80 80" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
  <style>
    #ham-btn {
      cursor: pointer;
    }
    #ham-btn:hover #r1 {
      transition: transform 0.2s;
      transform-origin: 50% 50%;
      transform: rotate(37deg) translate(0%, 28.75%) scaleX(1.1);
    }
    #ham-btn:hover #r2 {
      transition: x 0.2s;
      x: 120%;
    }
    #ham-btn:hover #r3 {
      transition: transform 0.2s;
      transform-origin: 50% 50%;
      transform: rotate(-37deg) translate(0%, -28.75%) scaleX(1.1);
    }
    
  </style>
  <rect id="r3" x="0" y="71.25%" width="100%" height="15%" rx="5%" />
  <rect id="r2" x="0" y="42.5%" width="100%" height="15%" rx="5%"/>
  <rect id="r1" x="0" y="13.75%" width="100%" height="15%" rx="5%" />
</svg>

Answer №2

Just a heads up, I would suggest removing the width and height specifications from the svg element. Instead, adjust the SVG's width using CSS to be 20% of the window width. This way, you can maintain proper proportions without needing to include 

preserveAspectRatio="xMidYMid meet"
.

To ensure consistency in sizing, I've enclosed the "hamburger" icon within a 

<symbol viewBox="0 0 80 80">
. With this setup, you won't require the preservation aspect ratio attribute anymore.

body {
  margin: 0;
  text-align: center;
}

svg#ham-btn {
  width: 20%;
  margin:auto;
  top:0;bottom:0;left:0;right:0;
  border: 1px solid black;
  fill: #383838;
  position:absolute; 
}
<svg id="ham-btn" viewBox="0 0 107.5 80" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
  <style>
    #ham-btn {
      cursor: pointer;
    }
    #ham-btn:hover #r1 {
      outline: 1px solid transparent;
      transition: transform 0.2s;
      transform-origin: 50% 50%;
      transform: rotate(37deg) translate(0%, 28.75%) scaleX(1.1);
    }
    #ham-btn:hover #r2 {
      transition: transform 0.2s;
      transform: translate(120%, 0);
    }
    #ham-btn:hover #r3 {
      outline: 1px solid transparent;
      transition: transform 0.2s;
      transform-origin: 50% 50%;
      transform: rotate(-37deg) translate(0%, -28.75%) scaleX(1.1);
    }
    
  </style>
  <symbol id="s" viewBox="0 0 80 80"> 
  <rect id="r3" x="0" y="71.25%" width="100%" height="15%" rx="5%" />
  <rect id="r2" x="0" y="42.5%" width="100%" height="15%" rx="5%"/>
  <rect id="r1" x="0" y="13.75%" width="100%" height="15%" rx="5%" />
  </symbol>  
   
  <use xlink:href="#s"  width="80" x="13.75"/>
</svg>

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

The flashing of Bootstrap tabs can be seen on various pages

Currently, I am encountering an issue with bootstrap tabs on my website. There seems to be a blinking problem with the tabs on certain pages. Check out this video showcasing the blinking tab in the search result page: Watch Here Interestingly, the same ta ...

jqueryhtmlcsstwitter-bootstrap

What is the correct way to define the onClick event in a React component?

I have been encountering an issue while trying to implement an onClick event in React using tsx. The flexbox and button are being correctly displayed, but I am facing a problem with the onClick event in vscode. I have tried several ideas from the stack com ...

htmltypescriptreact-nativesasstsx

Introducing a new div element completely disrupts the overall layout

Take a look at the code I have provided below. http://jsfiddle.net/xymgwonu/3/ Everything was working perfectly fine until I introduced a new div with the class name <div class="bubble"></div>. This caused some issues with the overall design. ...

htmlcssbootstrap-4

The auto-fill feature in Chrome mistakenly inputs the saved username in the wrong field

My web application, coded in HTML/PHP with a login screen, is encountering an issue with Chrome users. After logging in and navigating to the home page, some users are prompted to save their password. This leads to the username appearing in a field unrelat ...

htmlgoogle-chromeautofill

How do you transfer drop-down values from an HTML template to views in Django?

I am trying to figure out how to pass the selected option value in a drop down menu to the views. The HTML code of my template is as follows: <select name="version" id="version" onchange="location = this.value;"> &l ...

pythonhtmldjangodjango-templates

Ways to induce scrolling in an overflow-y container

Is there a way to create an offset scroll within a div that contains a list generated by ngFor? I attempted the following on the div with overflow-y: @ViewChild('list') listRef: ElementRef; Then, upon clicking, I tried implementing this with s ...

javascripthtmlangulartypescriptngfor

CSS background: seeking a fresh background for the rest of my pages

When I use CSS background: url(stuffhere.jpeg) for the background, it remains unchanged when clicking on other videos categorized as "projects," not pages. I have attempted using <body id="home"> and <body id="projects">, creating two backgrou ...

cssbackground

Where is the best place to import Bootstrap in my SCSS file when customizing it with Sass?

When attempting to customize bootstrap using Sass, I discovered that overriding default bootstrap variables can be quite confusing. I am curious if someone could provide an explanation for the inconsistent behavior. Some variables only seem to be overridd ...

csssassbootstrap-5

The behavior of Mozilla in handling JQuery attr() function may result in variations in design elements such as font-family or font-size

I'm currently working on the login form. Below is my view in CodeIgnitor: <div id="login-form"> <?php echo heading('Login', 2); echo form_open('login/login_user'); echo form_input('email', set_value ...

javascriptjqueryhtmlcss

The Angular Material Theme is not being properly displayed on the mtx-datetimepicker component

Issue: While using directives from ng-matero for DateTime with Angular Material for application design, the dateTimepicker element is not applying the angular material theme as desired. https://i.sstatic.net/zPBp3.png Code Example The app.module.ts file i ...

cssangularangular-material

Tips for aligning website content (including the body and navigation bar) at the center in rtd sphinx

Trying to create documentation with the Read the Docs theme for Sphinx documentation. Want to center the entire webpage, including both the body and left navigation bar so that as the window width increases, the margins on both sides increase equally. Righ ...

htmlcsspython-sphinxread-the-docs

Is the absence of http(s) in <link ...> causing any issues?

I recently noticed a peculiar link on the Font Awesome homepage that seems to work without including http or https. <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> This made me wonder, what does // a ...

htmlcsshttpnetworking

Creating "search result pages" with HTML, PHP, Javascript, and MySQL

Consider the scenario where you have a table with two columns: id and name, containing thousands of rows. You have a search engine that allows searching by free text, using the query: SELECT * FROM `table` WHERE `name` LIKE '%$search%' The res ...

javascriptphphtmlmysql

Reactjs Rendering problem with retrieving data from the backend in a popover

Take a look at the test environment where this problem is occurring https://codesandbox.io/s/nice-cache-kl12v My website design is being done with antd. Right now, I'm facing an issue where I need to display notifications to the user, which are acces ...

javascripthtmlcssreactjsantd

The fixed-top navigation bar in Bootstrap obscures the links within the #content

As a student studying software development, I am currently working on a web development project for my class. Utilizing Bootstrap, I have implemented a navbar-fixed-top and structured the body as a table-striped table with each row containing a <a href= ...

javascripthtmlcsstwitter-bootstrap-3

The MinWidth property in ColumnDefinition is not functioning as expected

Currently, I am encountering an unusual issue while using a Grid in WPF (XAML) and setting the MinWidth property in a ColumnDefinition. When I have 9 ColumnDefinitions with 'Width="*"' specified for each one, and then apply the MinWidth property ...

wpfxamlgridwidthcss

Having trouble connecting to CSS in a node.js HTML document

My website is encountering an issue where the CSS fails to load, and I am receiving the following error message: Refused to apply style from 'http://localhost:5000/server/nodeClient/public/css' because its MIME type ('text/html') is not ...

cssnode.jsexpressserver

What is the best way to adjust the width of a navbar using JavaScript?

I am experimenting with a responsive design and facing an issue - the width of my #menu in CSS is initially set to 0, but I need to change this value based on user input using JavaScript. Now, I want to dynamically adjust the width of the menu for differe ...

javascripthtmlcss

What could be the reason for Material UI xs={12} not extending to the full width of a mobile screen?

click here for image On my mobile screen, my components should be taking up the entire width but they seem to have an invisible margin on the right. <React.Fragment> <CssBaseline /> <ThemeProvider theme={theme}> <Grid ...

cssreactjsmaterial-ui

The Javascript code fails to execute after other scripts have been employed

Trying to create an expanding search bar that expands upon button click and collapses when clicking elsewhere on the page. The issue I'm facing is that everything works well initially, but after the second script hides the input field on a click outsi ...

javascripthtmlcssweb-deployment