SVG vs. Font
Both can solve the same problem. However, the font needs to be downloaded and known, squares may appear for the user. Unlike that, SVG doesn't have this problem.
SVG benefits
- Interactive and Stylish via CSS
- Responsive and adaptive

- Advanced animations
- Perfect for graphics, the D3 makes use
- Effects and filters
- Support up to i18
- Minified via GZIP
- Good accessibility
- Has a tree in the DOM
- It's code
When use SVG or Bitmap?
The following image clear demonstrate when use SVG or Bitmap

How you should invoke the SVG
- Use image element from HTML. But you can't edit with CSS this way
- On CSS using:
backgroud-image: url(image.svg). But it have the same problem when using an image element from HTML