You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
168 lines
3.2 KiB
168 lines
3.2 KiB
# SVG
|
|
|
|
## Base tag
|
|
|
|
Everything goes inside here
|
|
|
|
```xml
|
|
<svg></svg>
|
|
```
|
|
|
|
## Positioning
|
|
|
|
SVG tag is an inline element
|
|
|
|
- (0,0) - x = 0, y = 0
|
|
- starts at top left
|
|
- y increases vertically down
|
|
- can use negative values
|
|
- -x goes left
|
|
- -y goes up
|
|
|
|
## Styling
|
|
|
|
Can be done with attributes:
|
|
|
|
- `fill=red` or `fill=#ff0000` fill color
|
|
- `stroke=red` or `stroke=#ff0000` stroke color
|
|
- `stroke-width=4` width of stroke
|
|
- `fill-opacity=0.5` transparency of fill
|
|
- `stroke-opacity=0.5` transparency of stroke
|
|
- `transform = "translate(2,3)"`
|
|
- `transform = "scale(2.1)"`
|
|
- `transform = "rotate(45)"`
|
|
|
|
|
|
Can also be done with CSS:
|
|
|
|
```css
|
|
circle {
|
|
fill:red;
|
|
stroke:blue;
|
|
stroke-width:3;
|
|
fill-opacity:0.5;
|
|
stroke-opacity:0.1;
|
|
transform:rotate(45deg) scale(0.4) translate(155px, 1px);
|
|
}
|
|
```
|
|
|
|
## Circle
|
|
|
|
- attributes
|
|
- `r` radius
|
|
- `cx` x position
|
|
- `cy` y position
|
|
|
|
```xml
|
|
<circle r="50" cx="200" cy="300"/>
|
|
```
|
|
|
|
## Line
|
|
|
|
- attributes
|
|
- `x1` starting x position
|
|
- `y1` starting y position
|
|
- `x2` ending x position
|
|
- `y2` ending y position
|
|
|
|
```xml
|
|
<line x1="0" y1="0" x2="100" y2="100"/> <!-- no stroke, so invisible -->
|
|
<line x1="0" y1="0" x2="100" y2="100" stroke="purple"/>
|
|
```
|
|
|
|
## Rectangle
|
|
|
|
- attributes
|
|
- `x` x position of top left
|
|
- `y` y position of top left
|
|
|
|
```xml
|
|
<rect x="50" y="20" width="150" height="150"/>
|
|
```
|
|
|
|
## Ellipse
|
|
|
|
- attributes
|
|
- `cx` x position
|
|
- `cy` y position
|
|
- `rx` x radius
|
|
- `ry` y radius
|
|
|
|
```xml
|
|
<ellipse cx="200" cy="80" rx="100" ry="50"/>
|
|
```
|
|
|
|
## Polygon
|
|
|
|
- attributes
|
|
- `points` set of coordinate pairs
|
|
- each pair is of the form x,y
|
|
|
|
```xml
|
|
<polygon points="200,10 250,190 160,210" />
|
|
```
|
|
|
|
## Polyline
|
|
|
|
A series of connected lines. Can have a fill like a polygon, but won't automatically rejoin itself
|
|
|
|
```xml
|
|
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" stroke="blue" fill="none"/>
|
|
```
|
|
|
|
## Path
|
|
|
|
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
|
|
|
|
- attributes
|
|
- `d` a set of drawing commands
|
|
- M = moveto
|
|
- L = lineto
|
|
- Q = quadratic Bézier curve
|
|
- Q x1 y1, x y
|
|
- uses one control point for start and end controls
|
|
- T = smooth quadratic Bézier curveto
|
|
- T x y
|
|
- strings together multiple quadratic lines
|
|
- C = curveto
|
|
- C x1 y1, x2 y2, x y
|
|
- first pair is first control point
|
|
- second pair is second control point
|
|
- last pair is final ending point of curve
|
|
- S = smooth curveto
|
|
- S x2 y2, x y
|
|
- follows another S or C command
|
|
- uses x2 y2 of previous S or C command
|
|
- Z = closepath
|
|
- **Note:** All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned.
|
|
|
|
```xml
|
|
<path d="M150 0 L75 200 L225 200 Z" />
|
|
<path d="M0 100 Q 50 50, 100 100 T 200 100 Z" stroke="black" fill="transparent"/>
|
|
<path d="M0 70 C 0 120, 50 120, 50 70 S 100 20, 100 70" stroke="black" fill="transparent"/>
|
|
``
|
|
|
|
## Text
|
|
|
|
Content of tag is the text
|
|
|
|
```xml
|
|
<text x="0" y="15">I love SVG!</text>
|
|
```
|
|
|
|
Can use font-family and font-size CSS styling
|
|
|
|
## Group
|
|
|
|
- no special attributes, so use transform
|
|
- can put multiple elements inside it.
|
|
- positioning and styling apply to children
|
|
|
|
```xml
|
|
<g></g>
|
|
```
|
|
|
|
## Documentation
|
|
|
|
https://developer.mozilla.org/en-US/docs/Web/SVG/Element
|