add svg
This commit is contained in:
parent
8bad635483
commit
26d0ad54f6
GPG key ID:
901B2ADDF27C2263
1 changed files with 68 additions and 0 deletions
68
technology/files/media/image/SVG.md
Normal file
68
technology/files/media/image/SVG.md
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
---
|
||||
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.
|
||||
Loading…
Reference in a new issue