Adjustable width (100%) and set height for SVG

I am attempting to insert an SVG object onto my HTML page with a width of 100% and a fixed height.

Upon viewing my fiddle, you will notice that the height of the dark-grey object changes based on the window proportions, which is not the desired outcome.

Click here to view the issue

HTML

<body>
<!-- HEADER -->
<header>
    <div class="logo"></div>
    <div class="triangle">
        <svg data-type="vertical_parallax" data-speed="2" x="0px" y="0px" width="410" height="410" viewBox="0 0 310 310" style="-webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);">
            <g>
                <polyline fill="#CC0000" points="0,0 0,200 300,0    "></polyline>
            </g>
        </svg>
    </div>
    <div class="nav">
        <svg width="100%" viewBox="0 0 10 10" preserveAspectRatio="xMinYmin">
            <polygon fill="#222" stroke-width="0" points="0,1.5 0,0 10,0 15,0 " />
        </svg>
    </div>
</header>
<!-- CONTENT -->

CSS

body {
margin: 0;
}
header svg {
    display: block;
    margin: 0;
}
header .triangle {
    z-index: 200;
}
header .logo {
    margin-top: -90px;
}
header .nav {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    z-index:-1;
}
htmlcsssvg

Answer №1

  1. Ensure your SVG element has a set height to prevent it from resizing with the width.
  2. Adjust the viewBox attribute to crop the content to the desired height.
  3. Check that the preserveAspectRatio value is correctly spelled and case-sensitive, such as xMinYMin (not xMinYmin).

Example: http://jsfiddle.net/Lq207ery/8/

If you want the dark grey triangle to stretch without maintaining its aspect ratio, use preserveAspectRatio="none".

Example: http://jsfiddle.net/Lq207ery/9/

Answer №2

Your explanation may be brief, but you can achieve it using the following code:

HTML Code :

<header>
    <div class="triangle">
        <svg x="0px" y="0px" width="410" height="410" viewBox="0 0 310 310">
            <g>
                <polyline fill="#CC0000" points="0,0 0,200 300,0"/>
            </g>
        </svg>
    </div>
    <div class="nav"></div>
</header>

CSS Code :

html, body {
    margin: 0;
}
header {
    position: relative;
}
header .triangle {
    position: relative;
    z-index: 2;        
}
header .nav {
    position: absolute;
    top:0;
    left:0;
    width: 2000px; // for larger screens
    height: 100px;
    background-image:url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22150px%22%20height%3D%2215px%22%20viewBox%3D%220%200%20150%2015%22%3E%3Cg%3E%3Cpolygon%20fill%3D%22%23222%22%20points%3D%220%2C15%200%2C0%20100%2C0%20150%2C0%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    background-size: cover;
    background-position: bottom left;
    z-index: 1;
}

SVG before URL encoding :

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="15px" viewBox="0 0 150 15">
    <g>
        <polygon fill="#222" points="0,15 0,0 100,0 150,0"/>
    </g>
</svg>

Demo : http://jsfiddle.net/sparkup/21uaffpy/

Alternatively, you can view a similar line of code here: http://jsfiddle.net/sparkup/21uaffpy/18/

Answer №3

Another option could be to include a container div with a specified font-size, especially if the svg already has the viewBox and preserveAspectRatio properties set:

<div style="height: 100px; width: 100px; font-size: 100px">
   <svg>...</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

Creating a stylish border for a div element

Having trouble with styling a border around a div box. I'm struggling to find a way to prevent the borders from looking like this: Let me show you an example of what I'm dealing with: .num.num_1 { border-left-color: #0D2431; } .num { wid ...

htmlcss

How can I ensure that a div is positioned over another div with the same coordinates across all screen sizes?

[http://jsfiddle.net/w7r3gveg/]1 I am looking to position 4 Facebook logos in the center bottom of my background image. The background is represented by the 'bg' div, while the Facebook logo is in the 'facebook' div. Currently, I can ...

htmlcss

Utilizing jQuery to add a class to an element when a different one is hovered above

I'm currently working on implementing effects on the edges of a webpage that will be triggered when a central div is hovered over. The main tool I'm using for this task is jQuery. Despite my efforts to diagnose the issue by using alerts in my Ja ...

javascriptjqueryhtmlcss

Incorporating jQuery ajax requests into divs seamlessly to avoid any page disruptions

When loading numerous ajax calls on a page, the timing of each call varies, resulting in some content loading before the user reaches the top of the page. This may cause the user to miss viewing certain data unless they scroll back up to the top. Below is ...

javascriptjqueryhtmlajax

Using TypeScript with Angular, you can easily include parameters to HTML tags

I have an HTML element that looks like this: eventRender(info){ console.log(info.el); } This is the output I'm seeing: https://i.stack.imgur.com/G0hmw.png Now, I want to include these attributes: tooltip="Vivamus sagittis lacus vel augue ...

htmlangulartypescripttooltipelement

Field for text input enclosed within the <select> tag

I have a project where I am implementing a dropdown using AngularJS. Here is the code snippet: <div class="col-md-9"> <input type="text" placeholder="Enter Module" list="names" ng-model="data.Name" /> <select id="names" class ...

htmlangularjscomboboxhtml-select

How to determine if an Angular list has finished rendering

I am facing an issue where I have a large array that is being loaded into a ul list using ng-repeat in Angular. The loading of the list takes too long and I want to display a loader while it's loading, but hide it only when the ul list is fully render ...

javascripthtmlangularjs

Update the text on a button using a different button

function modify_button_text(){ //update the word from cat to dog. } <button id="button_1_id" >Cat</button> <br><br><br><br> <button id="modify_button_text_btn" >Change the Text of Above Button</button> ...

javascripthtmljquerycssarrays

Is there a way to create an internal link to another HTML templating engine page within Express.js?

I am currently facing an issue with two Pug files, index.pug and search.pug, stored in a /views folder. In my index.pug file, I have the following line of code: a(href="/search.pug") Search In my JavaScript file, I have specified the view engine as P ...

javascriptcssnode.jsexpress

How can I make an absolutely positioned div slide down from a specific area on the page using jQuery's slideDown() function?

I have a website project in progress where the main image on the homepage is of a house with windows and a door. The idea is that when a user clicks on a window, a <div> should appear with some text. Similarly, clicking on the door should trigger a & ...

jquerycsshtmlcss-positionslidedown

Make sure to pause and wait for a click before diverting your

Having an issue with a search dropdown that displays suggestions when the search input is focused. The problem arises when the dropdown closes as soon as the input loses focus, which is the desired functionality. However, clicking on any suggestion causes ...

htmlcssangulartypescript

Adjusting various settings on breakpoints in MUI v5

Previously in MUI version 4, I was able to apply multiple style parameters within a single media query using the following code: [theme.breakpoints.up('xs')]: { width: 100px, color: green, }, [theme.breakpoints.up('md' ...

cssreactjsmaterial-ui

Which characters are permissible for the id attribute to prevent the jQuery selector from throwing an exception?

I am facing a situation where the id attribute is inputted by an end user. For instance, if the id for a textbox is "11_=11" as entered by the user, then the HTML code will appear like this: <input type="text" id="11_=11"> The corresponding jQuery ...

javascriptjquerycsshtml

What is the best way to keep fixed input at the bottom of the page?

Let me begin by stating that I struggled to come up with a more appropriate name for this question than the one above. My issue is not limited to a fixed input; it's much more complex. Let me delve into the details of my problem here. The Scenario I ...

htmlcsscss-position

Utilizing Ruby interpolation to dynamically select elements in Capybara's CSS selectors

Having trouble with invalid selector errors when attempting to locate an element using capybara This method is successful: page.find("#widget_amount_Standard") But I encounter issues when trying any of the following: credit_type = "Standard" page.find( ...

cssrubycapybara

Engage the PROTRACTOR refresh function

I'm just getting started with automation and Protractor. I successfully automated the login page, but now I'm facing a challenge with accessing a menu that I need in order to navigate to a different page. Within the menu, there is an href="#/dom ...

javascriptcssangularjsprotractor

Retrieve information from the Django database

I am encountering an issue while trying to retrieve data from a form in a Django database. When using .cleaned_data['name'], I am receiving an attribute error: 'SnippetForm' object has no attribute 'cleaned_data'. Addition ...

pythonhtmldjango

How to adjust the banner image placement in Squarespace

I need the banner image to shift position on smaller screens, specifically those with a max-width of 414px. I want the focus to be on showcasing a specific product (a building) located on the right side of the image. This building should only appear on wid ...

htmlcsssquarespace

Persist user input even after reloading the page

In order to enhance the user experience, I would like to implement a feature where the data entered by the user is preserved even if they refresh, reload, or close the page. This includes retaining the selections made in the select elements. Additionally, ...

javascripthtmljquerycss

The issue with the functionality of position absolute in CSS when used with JavaScript

<html> <head> <style> #wrapper{ position: absolute; top : 250px; width: 500px; height: 500px; border: 1px solid red; } .tagging{ position: absolute; border: 1px solid black; width : 20px; height: 30px; } & ...

javascriptcss