1

Closed

Use SVGs instead of images

description

SVGs can be embedded in the HTML, work in all browsers after IE9, and scale infinitely.

For the phone bars icon, SVG would work much better.

From https://css-tricks.com/icon-fonts-vs-svg/:
If you can go IE 9+ / Android 3+, inline SVG is better at pretty much everything than icon fonts.
SVGs are very simple to use. Here's an example using the Facebook icon:
<head>
<svg id="svg-source" style="display: none;" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
   <symbol id="fa-facebook" viewBox="0 0 1792 1792">
      <title>Facebook icon from Font Awesome</title>
      <svg><path d="M1579 128q35 0 60 25t25 60v1366q0 35-25 60t-60 25h-391v-595h199l30-232h-229v-148q0-56 23.5-84t91.5-28l122-1v-207q-63-9-178-9-136 0-217.5 80t-81.5 226v171h-200v232h200v595h-735q-35 0-60-25t-25-60v-1366q0-35 25-60t60-25h1366z"></path></svg>
    </symbol>
</defs></svg></head>

<body>
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A//iDoRecall.com/?sref">
  <svg><use xlink:href="#fa-facebook"></use></svg>
</a>
</body>
Closed Sep 16, 2015 at 6:36 AM by gidon

comments

gidon wrote Sep 16, 2015 at 6:35 AM

Hi Dan,

SVG is already supported:
http://www.radioactivethinking.com/rateit/example/example.htm#ex_7c

Cheers,
Gidon