---
obj: format
mime: "image/svg+xml"
extension: "svg"
aliases: ["Scalable Vector Graphics"]
---

# SVG (Scalable Vector Graphics)
Scalable Vector Graphics (SVG) is an [XML](../../XML.md)-based vector image format for describing two-dimensional graphics. Unlike raster image formats like JPEG or [PNG](PNG.md), SVG images are resolution-independent, making them suitable for a wide range of use cases, including web development, graphic design, and data visualization.

## Usage
### 1. **Creating SVG Images**
   - **Text Editor**: SVG images can be created and edited using any text editor. Simply write SVG markup code to define shapes, paths, and styles.
   - **SVG Editing Software**: Use specialized SVG editing software like Adobe Illustrator, Inkscape, or Sketch to create and manipulate SVG graphics visually.
   - **Conversion Tools**: Convert existing graphics to SVG format using conversion tools or online converters. Tools like Adobe Photoshop or [GIMP](../../../applications/media/images/GIMP.md) offer options to export graphics as SVG files.

### 2. **Embedding SVG Images**
   - **Inline Embedding**: Embed SVG images directly into [HTML](../../../internet/HTML.md) documents using the `<svg>` element. You can define SVG markup directly within the [HTML](../../../internet/HTML.md) file.
   - **External Embedding**: Reference SVG images as external files using the `<img>` or `<object>` elements. This allows you to maintain separate SVG files and reuse them across multiple [HTML](../../../internet/HTML.md) documents.

### 3. **Styling SVG Images**
   - **CSS Styling**: Apply styles to SVG elements using [CSS](../../../internet/CSS.md) to control colors, fonts, strokes, fills, and other visual properties. Use inline styles or external [CSS](../../../internet/CSS.md) files to apply styles to SVG elements.
   - **Presentation Attributes**: Apply presentation attributes directly to SVG elements using [XML](../../XML.md) syntax. Presentation attributes define visual properties such as color, opacity, and stroke width.

### 5. **Optimizing SVG Images**
   - **File Optimization**: Optimize SVG files for web delivery by removing unnecessary elements, minifying code, and compressing files for faster loading. Tools like SVGO (SVG Optimizer) automate the optimization process.
   - **External Tools**: Use external tools and services to optimize SVG files, remove metadata, and reduce file size without sacrificing image quality.

## File Structure

An SVG file consists of [XML](../../XML.md) markup defining shapes, paths, and styles. Here's a basic structure of an SVG file:

```xml
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>
```

### Common SVG Elements
#### Shapes
- `<rect>`: Represents a rectangle with specified width and height. Attributes: `x`, `y`, `width`, `height`, `rx`, `ry` (for rounded corners).
- `<circle>`: Represents a circle with a specified radius. Attributes: `cx`, `cy` (center coordinates), `r` (radius).
- `<ellipse>`: Represents an ellipse with specified radii. Attributes: `cx`,`cy` (center coordinates), `rx`, `ry` (horizontal and vertical radii).
- `<line>`: Represents a straight line between two points. Attributes: `x1`, `y1` (start point), `x2`, `y2` (end point).
- `<polyline>`: Represents a series of connected straight line segments. Attributes: `points` (list of points).
- `<polygon>`: Represents a closed shape defined by a series of connected points. Attributes: `points` (list of points).

#### Text
- `<text>`: Represents text elements within an SVG document. Attributes: `x`, `y` (position), `font-family`, `font-size`, `fill` (color).
- `<tspan>`: Represents a sub-segment of text within a `<text>` element. Attributes: `x`, `y` (position relative to parent `<text>`), `dx`, `dy` (additional offset).

#### Paths
- `<path>`: Represents a path defined by a series of commands. Attributes: `d` (path data), `fill`, `stroke`, `stroke-width`.

#### Gradients and Patterns
- `<linearGradient>`: Defines a linear gradient that fills an element with color along a straight line. Attributes: `x1`, `y1`, `x2`, `y2` (gradient vector), `stop` (color stops).
- `<radialGradient>`: Defines a radial gradient that fills an element with color from the center outward. Attributes: `cx`, `cy`, `r` (center and radius of gradient), `stop` (color stops).
- `<pattern>`: Defines a pattern that can be used to fill shapes or other graphical elements. Attributes: `width`, `height`, `viewBox` (size and viewbox of the pattern).

#### Grouping and Transformation
- `<g>`: Groups multiple SVG elements together, allowing them to be transformed as a single unit. Attributes: None.

#### Transform Attributes
Various attributes (`transform`, `rotate`, `scale`, `translate`, `skewX`, `skewY`) allow for transformations such as rotation, scaling, translation, and skewing of SVG elements.

#### Miscellaneous
- `<defs>`: Defines reusable elements or attributes within an SVG document. Typically used to define gradients, patterns, or filters.
- `<mask>`: Applies masking effects to SVG elements, allowing portions of the image to be hidden or revealed based on the mask definition.
