SVG, static vs absolute vs relative, and coordinates - mobile

Question

I have to begin by apologizing for my inability to grasp what can only be described as logic. I have photoshopped the proposed layout. Here is a snapshot:
Layout:
I do not have example code. This is because I can't write code if I don't know how to approach it. Which brings me to:
I'm trying to design an overlayed SVG navigation menu (achieved as red rectangle + trapezoid polygon) that's always at the bottom of the page and pops out when clicked/touched to show expanded menu options. From what I've read and understand, using absolute (do I mean "static" here?) values to define position (pixels vs percent) is bad design because of wildly varying resolutions and DPI across many devices. I've tried a simple example in W3's Try Me editor just to get a grasp of how I'll position the red rectangle. I used:
<svg>
<rect width="100%" height="10%" x="0%" y="90%" style="fill:#ff0000;" />
</svg>
This places a red rectangle spanning the entire width of the page (regardless of resolution) at the bottom, without clipping the rectangle outside the viewport. Success! Right..? Well.. the menu isnt just a rectangle. There will be a polygon trapezoid "bump" in the center where the hamburger menu icon will go. This led to my problem. The polygon is defined by coordinates. And coordinates are absolute (or static?). Defined in pixels or inches or various other units. It doesn't support percentages from what I've read, and I'm not sure that's what I'd want anyway. Using percentages means that rectangle will stretch to fill whatever "10%" of the viewport height is. On a desktop it will be thinner than on mobile in portrait. It also means that the polygon won't necessarily be centered, as 550px will not always represent 50% (example values).
I'm going about this wrong. Help me find the proper logic for laying out this page. Honestly, after this, dynamically loading content underneath seems like the easy part.
FYI, I'd like to avoid JS and plugins as much as possible. By that I mean, I don't want to use them AT ALL. CLARIFICATION: If it can be avoided.
I'd be more than happy to clarify ad nauseum. Though this is the first time I'm actively using SO, and have only been previously exposed to it via google searches.
EDIT: I'm asking in the context of working with SVG, since this is what I'm having trouble finding proper documentation on. What I find is blog posts and "download this code/plugin to achieve this effect" instead of conceptual descriptions of how to achieve those effects. I've coded websites (personal, not professional) when HTML4 and CSS2 were the tools. Back then, you didn't have to worry about mobile phones. You could work within commonly used resolutions and aspect ratios (16:9 and 4:3 were pretty much it). But now those devices have wildly varying pixel densities and methods of rendering and 2 aspect ratios (portrait and landscape). I'm going from a background in fairly static webpages to mighty morphin' power webpages.
TLDR: How to do SVG? How do I put that trapezoid in the center, and have it retain its width/height regardless of the viewport's. Also, if I'm supposed to avoid absolute values (defining the height of the rectangle in pixels), how do I maintain a consistent height and proper positioning of the absolutely positioned polygon with relative values?
EDIT2: Thank you Paul! This has helped me immensely!! Being able to see the code and have it explained why and under what circumstance it does or does not work allows me to understand how this kind of tool is used. Especially when explained in context to to my own ideas. The CSS version is also very helpful. I've never used it beyond basic styling of elements. Both answers are excellent.

Answer 1

You don't need SVG for this. What you want to achieve is very easy to do with CSS.
var tabcontainer = document.querySelector(".tabcontainer");
var tabbutton = document.querySelector(".tabbutton");
tabbutton.addEventListener("click", function() {
tabcontainer.classList.toggle("open");
});
.container
{
width: 500px;
height: 500px;
position: relative;
background-color: black;
overflow: hidden;
}
.tabcontainer
{
position: absolute;
width: 100%;
bottom: -44px;
}
.tabcontainer.open
{
bottom: 0px;
}
.tabbutton
{
width:100px;
height: 0;
margin: 0 auto;
border-bottom: solid 20px red;
border-left: solid 16px transparent;
border-right: solid 16px transparent;
text-align: center;
cursor: pointer;
}
.tabbutton I
{
color: white;
}
.tabbody
{
width: 100%;
height: 60px;
background-color: red;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="tabcontainer">
<div class="tabbutton"><i class="fa fa-bars"></i></div>
<div class="tabbody"></div>
</div>
</div>
Using SVG
Generally, anything in an SVG gets scaled if the SVG scales. This can cause a problem when people want to create responsive SVG documents on a page.
However, with some particular SVG layouts it is possible to do what you want. In particular it is when you have simple designs with elements that need to sit in the corners, or centred on one of the sides.
Here's a version of the above CSS-only example that uses SVGs for the tab part.
How this works is that we are using the feature where, if the aspect ratio of the contents (defined by the viewBox) is different from the SVG (defined by width and height), the contents will automatically get scaled and centred.
So here we are defining a button that is 132x20, and putting it in an SVG that is 100% x 20. Where "100%" here is the width of the container/page. Because the aspect ratio is different, <polygon> representing the button will get automatically centred horizontally.
var tabcontainer = document.querySelector(".tabcontainer");
var tabbutton = document.querySelector(".tabbutton");
tabbutton.addEventListener("click", function() {
tabcontainer.classList.toggle("open");
});
.container
{
width: 100%;
height: 500px;
position: relative;
background-color: black;
overflow: hidden;
}
.tabcontainer
{
position: absolute;
width: 100%;
bottom: -44px;
}
.tabcontainer.open
{
bottom: 0px;
}
.tabbutton
{
fill: red;
cursor: pointer;
}
.tabbody
{
fill: red;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<svg width="100%" height="80" class="tabcontainer">
<svg width="100%" height="20" viewBox="0 0 132 20" class="tabbutton">
<polygon points="16,0, 116,0, 132,20, 0,20"/>
<g transform="translate(66,0)" fill="white">
<rect x="-8" y="4" width="16" height="3"/>
<rect x="-8" y="9" width="16" height="3"/>
<rect x="-8" y="14" width="16" height="3"/>
</g>
</svg>
<rect y="20" width="100%" height="60" fill="red" class="tabbody"/>
</svg>
</div>