Replacing clip-path shape with SVG shape - html

Question

I currently have a polygon with text inside shown below
.title {
clip-path: polygon(1% 0, 100% 15%, 96% 90%, 0 75%);
background-color: blue;
color: #FFF;
font-size: 1.7em;
line-height: 50px;
height: 60px;
width: 250px;
}
<h1 class="title"> WELCOME TO</h1>
I am looking for a more browser friendly version of this so I've been looking into using an SVG image. I'm struggling to nicely code this, as you see below I have the SVG shape, after a bit of testing, I quickly realised it doesn't scale well with the browser width. I would be happy if I could just keep it the same size all the time.
Then for the text after researching I learnt about the tag inside an tag, but even that I'm struggling to format the text.
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 7 9" version="1">
<polygon points=".1 0,5 .2,4.4 1.8,0 1.6" style="fill: #253234;" />
<text x="1" y="1" fill="white" style="font-family:arial; font-size:.4">WELCOME TO</text>
</svg>
Does anyone know of a better way of doing this, that works on major browsers and devices?

Answer 1

if i were you i would try to achieve the same effect with only css using rotation for the container, inverting the text rotation with the same amount, then using a pseudo element (:after) with absolute positioning to achieve the non rectangular shape effect.
run the snippet for an example that you can adjust to fit your needs.
.container {
transform:rotate(3deg);
display:inline-block;
position:relative;
top:50px;
padding:20px 30px 20px 20px;
background-color:blue;
}
.container:after {
content:'';
display:block;
background:white;
width:20px;
height:110%;
position:absolute;
top:0;
right:-10px;
transform:rotate(10deg);
}
.title {
color:#fff;
display:inline-block;
font-size:18pt;
text-transform:uppercase;
font-family:arial;
transform:rotate(-3deg)
}
<div class="container"><span class="title">Welcome to </span></div>

Answer 2

Since the first and second version you gave differ so much, I am not that sure what it is you want to achieve. I'm going mostly with the first one.
The main trick is with the way you use the viewBox attribute (and its accompaining preserveAspectRatio). Think of the viewBox as a rectangle that is fit into the area you define with width and height. (here, spelled out in CSS.) The preserveAspectRatio describes the fitting rule: choose the largest possible size for the rectangle that fits inside the element, and move it to the left and vertically to the middle.
Everything inside the <svg> now will remain fixed in position and proportion to that rectangle. If you raise the height of the element, the size of the text will grow; and if you lower its width, eventually it will shrink, but always together with the polygon.
I've positioned the text with text-anchor: middle, which is the equivalent of text-align: center for SVG. Using a font size of 0.4 as you did is not a good idea; browsers are prone to handle values below 1 incorrect.
Finally, if you are using this in place of a <h1> tag, you should either surround it with that to retain accessability, or set appropriate ARIA attributes as shown:
.title {
height: 60px;
width: 100%;
display: block; /* not needed if surrounded by <h1> */
}
.title polygon {
fill: blue;
}
.title text {
font-family: Arial;
font-size: 24px;
fill: #FFF;
text-anchor: middle;
}
<svg class="title" viewBox="0 0 250 60" preserveAspectRatio="xMinYMid meet"
aria-role="heading" aria-level="1">
<polygon points="2.5,0 250,9 240,54 0 45" />
<text x="125" y="36">WELCOME TO</text>
</svg>