Search code examples
htmlsvginline-svg

how can use svg shape in web design?

I want use the svg code of a shape like the image full width triangle image how can use this svg to fill the browser? here is the code of it 

<svg xmlns="http://www.w3.org/2000/svg">
<g>
  <rect fill="#fff" id="canvas_background" height="100%" width="100%" y="0" x="0"/>
</g>
<g>
 <path id="svg_1" d="m583.25,1l-582.5,404l4,-402l578.5,-2z" stroke-width="1.5" fill="#33666C"/>
</g>
</svg>
Solution

  • You want something like this I guess. I've added a viewBox so the shape scales.

    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 584 405" preserveAspectRatio="none">
<g>
  <rect fill="#fff" id="canvas_background" height="100%" width="100%" y="0" x="0"/>
</g>
<g>
 <path id="svg_1" d="m583.25,1l-582.5,404l4,-402l578.5,-2z" stroke-width="1.5" fill="#33666C"/>
</g>
</svg>