SVG
SVG, or Scalable Vector Graphics, is an XML-based format for creating two-dimensional vector graphics. Unlike raster images, SVGs maintain high quality at any size, making them ideal for web design and responsive layouts.
With SVG, you can create shapes, paths, and text that are easily manipulated through CSS and JavaScript, allowing for dynamic and interactive graphics. It’s widely supported across modern web browsers, making it a powerful tool for developers and designers looking to enhance visual content on the web.
Syntax
While complex graphics are usually created using design tools like Illustrator and Inkscape, it's possible to write SVG by hand, and it can be embedded directly in HTML:
shape
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="yellow" />
</svg>
text
<svg width="200" height="100">
<rect width="200" height="100" fill="indigo" />
<text x="100" y="75"
font-family="Verdana"
font-size="50"
fill="white"
text-anchor="middle">SVG</text>
</svg>
path
<svg width="200" height="150">
<path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"
stroke="indigo" fill="transparent" stroke-width="2" />
</svg>
The <path> element is a versatile component used to create complex
shapes and lines. It allows you to define a shape by specifying a
series of commands and parameters in a single attribute. Here is a
breakdown:
-
M (move to): Moves the starting point to a specified coordinate without drawing a line.
-
C (cubic Bézier curve): Draws a cubic Bézier curve from the current point to a specified point, using two control points.
-
S (smooth cubic Bézier curve): Similar to C, but the first control point is inferred from the previous curve.
SVG for Application Development
SVG can be generated and manipulated programmatically, making it suitable for creating data visualizations, charts, and other dynamic graphics based on data inputs. Libraries such as D3.js and SVG.js simplify SVG manipulation, event handling, and data visualization.