https://github.com/swanie21/svg-shapes
Making custom SVG shapes
https://github.com/swanie21/svg-shapes
circle ellipse polygon polyline rectangle svg
Last synced: 5 months ago
JSON representation
Making custom SVG shapes
- Host: GitHub
- URL: https://github.com/swanie21/svg-shapes
- Owner: swanie21
- Created: 2017-03-16T03:47:55.000Z (over 9 years ago)
- Default Branch: gh-pages
- Last Pushed: 2017-03-30T19:34:42.000Z (about 9 years ago)
- Last Synced: 2025-06-21T05:41:35.961Z (12 months ago)
- Topics: circle, ellipse, polygon, polyline, rectangle, svg
- Language: HTML
- Homepage: http://kirstenswanson.io/svg-shapes/
- Size: 7.81 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SVG (Scalable Vector Graphics)
[SVG Playground of Shapes](http://kirstenswanson.io/svg-shapes/)
### SVG Background:
* Developed in 1999
* XML Vector Graphics Format
* SVGs are scalable and customizable
* Can create and edit with any text editor
* Can be used with animation
* High quality resolution no matter what size
### How to create your own SVGs
Start with the `` element tags
The `` element can be embedded right into the HTML
```
// element shape
```
Here is a list of elements that can be drawn inside the `` element:
* Circle
* Ellipse
* Rectangle
* Line
* Polyline
* Polygon
* Path
* Text
When styling these elements you will use different properties than your typical CSS properties that you're used to
To specify a background color you will use the property `fill`
To specify a border color you will use the property `stroke`
To specify the border width you will use the property `stroke-width`
```
fill="#2882f9" stroke="#000" stroke-width="3"
```
Shorthand styling:
```
style="fill:#2882f9;stroke:#000;stroke-width:3"
```
An important concept to understand with SVGs is the `viewport` and `viewBox`.
The `viewport` is the rectangular region of the SVG canvas, which is the viewing area the user will see. It is set by specifying the `width` and `height` properties of the SVG, which in turn determines the area of the coordinate system. By default the unit length is in pixels, but you can also use: `em`, `mm`, `pc`, `in` and `%`. The coordinate system starts in the top-left corner (0,0). If you increase the x-coordinate, the object will move towards the right. If you increase the y-coordinate, the object will move downwards.
```
//element
```
The `viewBox` is initially placed on top of the `viewport`, but can be stretched or displaced to change the viewable region. The `viewBox` property takes four values: `min-x`, `min-y`, `width` and `height`.
```
//element
```
## Create a Circle
```
```
`cx` property defines the x-coordinate from the center of the circle
`cy` property defines the y-coordinate from the center of the circle
`r` property defines the radius, which is the length of a line segment from the center to the perimeter
## Create an Ellipse
```
```
`cx` and `cy` properties define the center of the ellipse
`rx` property defines the wideness of the ellipse
`ry` property defines the height of the ellipse
## Create a Rectangle
```
```
If you want to create rounded corners you will need to add `rx` and `ry` properties
## Create a Line
```
```
`x1` (x-axis) and `y1` (y-axis) define the starting point of the line
`x2` (x-axis) and `y2` (y-axis) define the ending point of the line
## Create a Polyline
```
```
Using the x-axis and y-axis you can set coordinates to create shapes with lines
## Create a Path
```
```
`` element is a custom shape with curves, lines and arcs; imagine drawing a shape with a virtual pen going from point to point
The `` element can be grouped by wrapping the `` elements in `` tags
```
```
The `` element takes specific commands with the `d` property, which you can think of the `d` representing the *path data*
* M = move to
* L = line to
* V = vertical line
* H = horizontal line
* C = curve to
* S = smooth curve to
* Q = quadratic Bézier curve
* T = smooth quadratic Bézier curve
* A = elliptical arc
* Z = close path
*Uppercase letters represent `absolute` coordinate positioning and lowercase letters represent `relative` coordinate positioning based on the previous coordinate*
Some helpful libraries to animate SVGs are [Snap.svg](http://snapsvg.io/) and [GreenSock](https://greensock.com/)