Html Svg

HTML svg

Created By: chatGPT

Scalable Vector Graphics (SVG) is a powerful XML-based format for creating shapes and graphics directly in your web pages. One of the key advantages of SVG is its scalability — SVG images can be resized without losing quality. Below is an example of how to create a simple SVG graphic using HTML.

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

In this example, an SVG canvas of 100x100 pixels is defined. A red circle with a radius of 40 pixels is centered within the canvas. The stroke property defines the circle's outline color, while fill sets the fill color of the circle. You can adjust the attributes like cx, cy, and r to change the circle's position and radius.

<svg width="200" height="200">
  <rect width="100%" height="100%" fill="lightblue" />
  <circle cx="100" cy="100" r="50" fill="green" />
  <text x="100" y="125" font-family="Arial" font-size="20" fill="white" text-anchor="middle">SVG</text>
</svg>

Here, a light blue rectangle is added as a background, and a green circle is drawn in the center. Additionally, we include a text element that says 'SVG'. The text-anchor="middle" attribute is used to center the text horizontally.

<svg width="300" height="100">
  <defs>
    <linearGradient id="grad1" gradientUnits="userSpaceOnUse"
      x1="0" y1="0" x2="300" y2="0">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </linearGradient>
  </defs>
  <text x="150" y="50" font-family="Verdana" font-size="35" fill="url(#grad1)" text-anchor="middle">
    Gradient Text
  </text>
</svg>

In this example, a linear gradient is defined for the text fill, transitioning from red to blue. The defs element is used to define reusable objects like gradients. You can add various shapes, paths, and text to create intricate designs using SVG.

<svg width="200" height="200">
  <path d="M 10,10 H 190 V 190 H 10 L 10,10" fill="none" stroke="black" stroke-width="5" />
</svg>

This code creates a simple path that forms a quadrilateral. The d attribute holds the commands for drawing the shape. Here, H represents a horizontal line, V for a vertical line, and L for a line back to the starting point. You can use SVG to create complex shapes and designs with precision and flexibility.