knowledge/technology/files/media/image/SVG.md

obj	mime	extension	aliases
format	image/svg+xml	svg	Scalable Vector Graphics

SVG (Scalable Vector Graphics)

Scalable Vector Graphics (SVG) is an XML-based vector image format for describing two-dimensional graphics. Unlike raster image formats like JPEG or PNG, 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 offer options to export graphics as SVG files.

2. Embedding SVG Images

• Inline Embedding: Embed SVG images directly into HTML documents using the <svg> element. You can define SVG markup directly within the HTML 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 documents.

3. Styling SVG Images

• CSS Styling: Apply styles to SVG elements using CSS to control colors, fonts, strokes, fills, and other visual properties. Use inline styles or external CSS files to apply styles to SVG elements.
• Presentation Attributes: Apply presentation attributes directly to SVG elements using XML 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 markup defining shapes, paths, and styles. Here's a basic structure of an SVG file:

<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.