Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
CSS properties for SVG
## FILL ##
fill Sets fill color of the shape.
fill-opacity Sets fill opacity of the shape.
fill-rule Sets fill rule of the shape.
** example **
fill: #ccc;
fill: rgba(0,0,0,.5);
fill: red;
## STROKE ##
stroke Sets the stroke (line) color used to draw the outline of this shape.
stroke-dasharray Sets the stroke (line) dashing used to draw the outline of this shape.
stroke-dashoffset Sets the stroke (line) dash offset used to draw the outline of this shape.
stroke-linecap Sets the stroke (line) line cap used to draw the outline of this shape. Valid values are round, butt and square.
stroke-linejoin Setsthe shape to be used at the corners of paths or basic shapes when they are stroked.
stroke-miterlimit Sets the stroke (line) miter limit used to draw the outline of this shape.
stroke-opacity Sets the stroke (line) opacity used to draw the outline of this shape.
stroke-width Sets the stroke (line) width used to draw the outline of this shape.
** example **
stroke: #ccc;
stroke-width: .75; / stroke-with: 2px;
stroke-linejoin: miter | round | bevel | inherit;
stroke-linecap: butt | round | square | inherit;
## MARKER ##
marker Sets marker used along the lines (edges) of this shape.
marker-start Sets start marker used along the lines (edges) of this shape.
marker-mid Sets mid marker used along the lines (edges) of this shape.
marker-end Sets end marker used along the lines (edges) of this shape.
## TEXT ##
alignment-baseline Sets how the text is aligned to its x and y coordinates.
baseline-shift Sets the baseline shift used to render text.
dominant-baseline Sets the dominant baseline.
glyph-orientation-horizontal Sets horizontal glyph orientation.
glyph-orientation-vertical Sets vertical glyph orientation.
kerning Sets the kerning of the rendered text (kerning is letter spacing).
## GRADIENT ##
stop-color Sets the stop color used in a stop element used in a gradient.
stop-opacity Sets the stop opacity used in a stop element used in a gradient.
## MISCELLANEOUS ##
opacity Sets opacity of the element.

There is a typo on line 24.
stroke-with: .75; / stroke-with: 2px;

Should be stroke-width
(I tested both)

Looks nice!
What browser versions please?

hi legomushroom, please specify, whether I can use this SVG tech with Bootstrap or it only works with Boilerplate. Thanks in advance!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment