'Implement svg icons into web

I'm looking for best solution how to implement .svg icons into web.

Basically, I need to implement just few icons, what I have in my .psd, so I can choose any format, but it will be nice to have vector so I've choosed .svg.

Only, the problem is that I need to change color of that picture and also I need to be sure that it will be supported on all major browsers, IE as well.

For now, I'm using tag < object > which works nicely, but I'm unsure about browser support and also I can't simply change color.

How would you solve this situation ?

The .svg icons are very small and simple, I've also thought to convert them into fonts or icons, but not sure about best workflow how to do it properly.

Also, I was thinking about using .pngs, but there is a problem with changing colors and of course "scaleabness", but if I will not find out anything, I will probably end up with this...

I personaly like working with fonts (like font awesome and so...), as they are scaleable, colorable.... and displayed everywhere

Is possible to convert and add these icons from .psd to such a format, that will be close to fonts ?

Thank you for your answers :)

htmlcsssvgfontsicons


Solution 1:[1]

Check browser support for the various ways to implement SVG at http://caniuse.com/

Common workflows:

  • Automatically process .svg files into icon fonts, usable in CSS, with Gulp
  • Automatically insert .SVG content into HTML as data URIs, with server middleware
  • Insert all SVG icons inline into a page and reference as SVG Symbols
  • Insert all icons into one SVG document as individual symbols, and refer to individually with svg 'use' - https://css-tricks.com/svg-use-with-external-reference-take-2/

Solution 2:[2]

So I've found a solution

I've generated my own fonts from .svg. As icons we're small, there we're no problem to work with them like fonts. I've used

http://fontastic.me/

Very easy to work with, just upload your .svg, make some customisations like name of your fonts, mapping and add them into your page.

Solution 3:[3]

The best method is to use SVG code directly in the web browser, which is supported by almost all major web browsers. The SVG code can be easily customized with all of the CSS attributes, for example, you can use current Color for properties like fill and stroke color so that one can easily change the color of your free SVG icon from their CSS. This will also reduce the number of HTTP requests required to retrieve the image icon.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Phil Ricketts
Solution 2 JZK
Solution 3 Olivia Welsh

Related Questions