At the moment I am developing this simple site:
https://carl-robertshaw1.superhi.com/
The diagonal line is an SVG image but I what to code this SVG so that it is responsive, so it reminds at 1px on any screen, goes to the bottom left-hand corner and meets the logo in the same place, just off the 'C' of carl.
I've had a good look on here and can't find anything that would help me, can anyone help.
At the moment I have the SVG image set up like this:
.image1 {
position: fixed;
top: 0;
left: 0;
padding: 77px 230px 0 0;
}
.parent {
position: relative;
top: 0;
left: 0;
color: #ffffff;
}
<div class="parent">
<img class="image1" src='carl_line_mid.svg'>
</div>
Why don't just insert the SVG element into the HTML DOM?
Try:
<div class="parent">
<svg class="image1" style="height: 100%; width: 100%;">
<line x1="100%" y1="0" x2="0" y2="100%" style="fill:none; stroke:#fff; stroke-width:1px;"></line>
</svg>
</div>
I made some adjustments to the image. You can change the size of the svg via the style attribute (currently 100% of container), or remove the style attribute and set it with CSS. The width of the line will stay 1px.