Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jesstelford/color-svg-sprite
A technique for coloring external .svg files using external .css files.
https://github.com/jesstelford/color-svg-sprite
Last synced: 28 days ago
JSON representation
A technique for coloring external .svg files using external .css files.
- Host: GitHub
- URL: https://github.com/jesstelford/color-svg-sprite
- Owner: jesstelford
- Created: 2016-01-13T23:20:28.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-04-26T23:24:31.000Z (over 6 years ago)
- Last Synced: 2024-06-11T17:36:32.805Z (7 months ago)
- Language: HTML
- Homepage: https://jesstelford.github.io/color-svg-sprite
- Size: 6.84 KB
- Stars: 59
- Watchers: 2
- Forks: 12
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Colored SVG Sprite
A technique for coloring external `.svg` files using external `.css` files.
## Why?
Traditionally, the only way to style an SVG was either inline `` tag, or
inline css (inside a `.svg` file).
There is now a new way
method | **CSS Interactions (e.g. `:hover`)** | **CSS Animations** | **SVG Animations (SMIL)**
---- | ---- | ---- | ----
`![]()
` | No | Yes only if inside `` | Yes
CSS background image | No | Yes only if inside `` | Yes
`` | Yes only if inside `` | Yes only if inside `` | Yes
`` | Yes only if inside `` | Yes only if inside `` | Yes
`` | Yes only if inside `` | Yes only if inside `` | Yes
`` (inline) | Yes | Yes | Yes
**``** | **Yes** | **Yes** | ?
The last way is supported by all browsers (including IE + Edge with a [tiny
shim](https://github.com/jonathantneal/svg4everybody)). Read on for more!
## What?
This repo showcases 2 separate but complimentary points:
1. Using external SVGs
2. Styling those SVGs with CSS
### Using external SVGs
_[See svg4everybody](https://github.com/jonathantneal/svg4everybody) for more
details._
Given an external file [`sprite.svg`](sprite.svg):
```html
```
We can load that into our page like so:
```html
```
A couple of points to note here:
* [Use of `` instead of
``](https://css-tricks.com/svg-symbol-good-choice-icons/) inside the svg
allows setting the `viewBox` property, as well as `title` for accessibility.
* The `xlink:href` attribute points to the `id` of the `` you'd like to
use (in this example, we point at the `pencil`).
With the [svg4everybody](https://github.com/jonathantneal/svg4everybody) shim,
this works in all browsers.
### Styling those SVGs with CSS
Now, we can set a class on the containing `` element in the html, and target that with an external stylesheet:
```html
```
```css
.color-svg {
width: 150px;
height: 150px;
}
```
#### Color
Our `#pencil` svg looks like this:
```html
```
To change the color of the ``, we make use of the `fill` property:
```css
.color-svg {
width: 150px;
height: 150px;
fill: black;
}
```
Notice too that the `` has set `fill="currentColor"`. This is a [neat css
trick](http://codepen.io/FWeinb/post/quick-tip-svg-use-style-two-colors) which
tells the `` to inherit the color from its nearest parent that has
defined a `color` style:
```css
.color-svg {
width: 150px;
height: 150px;
fill: black;
color: #fff;
}
```
So now, our `` is colored `#fff`, and the `` is colored `black` :D
[Try the demo](http://jesstelford.github.io/color-svg-sprite), and hover + click to see different color combos.