HTML - SVG

HTML SVG (Scalable Vector Graphics): SVG is a markup language for describing two-dimensional vector graphics in XML format. It is widely used for creating graphics, illustrations, and interactive elements on the web. Here's a tutorial that covers SVG attributes and provides examples:

Basic SVG Structure:

  • Start by creating an SVG element using the <svg> tag.
  • Specify the width and height of the SVG canvas using the width and height attributes.
<svg " height="200">...</svg>

SVG Shapes:

  • Use various SVG shape elements to draw shapes, such as <rect>, <circle>, <ellipse>, <line>, <polyline>, and <polygon>.
  • Specify attributes like x, y, width, height, cx, cy, r, points, etc., to define the position, size, and other properties of the shapes.

SVG Styling:

  • Apply styles to SVG elements using CSS or inline styles.
  • Use the style attribute to apply inline styles, or link an external CSS file to the HTML document.
<rect style="fill: red; stroke: black; stroke-width: 2px;" />

SVG Text:

  • Use the <text> element to add text to the SVG canvas.
  • Specify the position of the text using x and y attributes.
<text x="50" y="100">Hello, SVG!</text>

SVG Transformation:

  • Apply transformations like translate, rotate, scale, and skew to SVG elements using the transform attribute.
<rect transform="translate(50, 50) rotate(45)" />

SVG Interactivity:

  • Use JavaScript or CSS animations to add interactivity to SVG elements.
  • Attach event listeners to SVG elements to respond to user interactions.
<circle onclick="alert('Clicked!')" />

SVG Embedding:

  • Embed SVG content directly into an HTML document using the <svg> tag or reference an external SVG file using the <object> or <img> tags.
<svg " height="200">...</svg>

These are just some of the key aspects of working with SVG in HTML. SVG provides a wide range of attributes and elements to create intricate and dynamic graphics. You can refer to the SVG specification and various online resources for more in-depth information and advanced techniques.

Drawing a Rectangle:

<svg " height="200">
  <rect x="50" y="50" " height="100" fill="blue" stroke="black" stroke-" />
</svg>

Creating a Circle:

<svg " height="200">
  <circle cx="100" cy="100" r="50" fill="red" stroke="black" stroke-" />
</svg>

Adding Text:

<svg " height="200">
  <text x="50" y="100" font-family="Arial" font-size="20" fill="black">Hello, SVG!</text>
</svg>

Drawing a Line:

<svg " height="200">
  <line x1="50" y1="50" x2="150" y2="150" stroke="black" stroke-" />
</svg>

Creating a Polyline:

<svg " height="200">
  <polyline points="50,50 100,150 150,50" fill="none" stroke="black" stroke-" />
</svg>

Embedding an External SVG File:

<object type="image/svg+xml" data="image.svg" " height="200"></object>

Remember to replace "image.svg" with the actual path to your SVG file.

These examples showcase some of the fundamental SVG shapes, attributes, and embedding techniques. You can modify the attribute values, add additional elements, apply styles, and incorporate interactivity to further enhance your SVG graphics.