Lets Draw

Next ❯SVG Coordinates

You must required a svg element to draw your 2d vector graphics in it

<svg width="100" height="100"></svg>
  • The width attribute set to 300, and the height attribute set to 150 by default, if not declared

Let's Start

Full-Syntax

<svg xmlns="http://www.w3.org/2000/svg"
     width="length" height="length"
     x="point" y="point"
     preserveAspectRatio="none|(xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax  meet|slice)"
     viewBox="minX minY width height">
    <!--Your SVG elements-->
</svg>
  • label_outlinesvg Attributes
    • xmlns - Must required for external SVG files
    • height, width - The height and width of svg element
    • x, y - To position the nested <svg> element along xy-axis
    • viewBox - To specify which portion of your coordinates are visible
    • preserveAspectRatio - To specify how an element with different aspect-ratio provided by viewBox must fit into a viewport
Example - To draw simple line
<svg height="100" width="200" style="border:1px solid teal;">
  <line x1="10" y1="50" x2="180" y2="50" style="stroke:red;"/>
</svg>

OUTPUT:

  • SVG provides pre-defined tags & attributes used to draw 2d vector graphics

  • SVG Coordinates
❮ Prev Getting Started
Next ❯SVG Coordinates
receipt