SVG are a special format of the image. They are mathematical lines and shapes that define the image. This means that for simple logotype images and icons, they are very data efficient. They are also scalable to any size without loss of quality because they are just a mathematical formula.
The main WPBusinessClub logo, with the Words and silhouettes, is drawn as an inline SVG making it infinitely scalable. At 25k it still looks good compared to a small 250px wide image which is 15k and a separate download.
Take a look at these simple icons from feather icons.
https://feathericons.com/ by Cole Bemis
We were so impressed with them, we thought we would write a simple plugin to use them as shortcodes in your content.
Inline Versus <img
These icons are simple and very compact. Here is the code for the Facebook icon
<svg xmlns="http://www.w3.org/2000/svg" width="56" height="24" viewBox="0 0 56 24"><path d="M20.9 19.3h-2.12v-1.24c-.8.94-1.5 1.4-2.23 1.4-.66 0-1.1-.3-1.34-.87-.12-.35-.22-.88-.22-1.67V7.9h2.12V17.16c.05.3.18.42.45.42.4 0 .78-.37 1.23-1V7.9h2.12v11.4M13.4 11.62c0-1.22-.23-2.13-.66-2.7-.56-.8-1.45-1.1-2.35-1.1-1.02 0-1.8.3-2.35 1.1-.44.57-.67 1.5-.67 2.7v4.07c0 1.2.2 2.04.64 2.6.56.8 1.48 1.2 2.37 1.2.9 0 1.82-.4 2.4-1.2.4-.56.6-1.4.6-2.6V11.6zm-2.1 4.3c.1 1.13-.25 1.7-.9 1.7-.66 0-1-.57-.9-1.7V11.4c-.1-1.13.24-1.66.9-1.66.65 0 1 .53.9 1.66v4.52zM5.03 13.1v6.2H2.8v-6.2S.47 5.46 0 4.04h2.35L3.92 10l1.56-5.95h2.34l-2.8 9.04" fill="#111111"/><path d="M42.74 9.7c-.33 0-.7.2-1.05.52v6.86c.33.34.7.5 1.04.5.6 0 .85-.42.85-1.55v-4.86c0-1.13-.27-1.46-.86-1.46M51.08 11.07c0-1.05-.27-1.36-.94-1.36-.67 0-.96.3-.96 1.35v1.25h1.9v-1.23" fill="#e62117"/><path d="M55.67 5.28s-.33-2.3-1.33-3.33C53.07.6 51.64.6 51 .53 46.33.2 39.32.2 39.32.2h-.02s-7 0-11.67.33c-.65.08-2.08.08-3.35 1.42-1 1.02-1.32 3.33-1.32 3.33s-.34 2.72-.34 5.44v2.55c0 2.72.34 5.43.34 5.43s.32 2.32 1.32 3.34c1.27 1.34 2.94 1.3 3.68 1.43 2.67.26 11.35.34 11.35.34s7.03 0 11.7-.34c.65-.08 2.07-.08 3.34-1.42 1-1.02 1.33-3.34 1.33-3.34S56 16 56 13.27v-2.55c0-2.72-.33-5.44-.33-5.44zM29.95 19.3h-2.23v-13h-2.35V4.18h7.04V6.3h-2.45v13zm8.05 0h-2.12v-1.24c-.8.94-1.5 1.4-2.23 1.4-.66 0-1.1-.3-1.34-.87-.12-.35-.22-.88-.22-1.67V8h2.12v9.17c.05.3.18.42.45.42.4 0 .78-.37 1.23-1V8H38v11.3zm7.7-3.38c0 1.04-.07 1.78-.2 2.26-.28.84-.87 1.27-1.67 1.27-.72 0-1.46-.44-2.14-1.28v1.14h-2.02V4.18h2V9.1c.66-.8 1.4-1.27 2.15-1.27.8 0 1.34.47 1.6 1.3.15.47.28 1.2.28 2.27v4.52zm4.46 1.67c.5 0 .8-.28.9-.83.02-.1.02-.6.02-1.42h2.12v.32c0 .66-.05 1.13-.07 1.33-.07.46-.23.87-.47 1.23-.56.82-1.4 1.22-2.45 1.22-1.05 0-1.85-.38-2.44-1.16-.43-.57-.7-1.4-.7-2.6v-3.96c0-1.2.25-2.14.68-2.72.58-.77 1.4-1.18 2.42-1.18s1.82.4 2.4 1.18c.4.58.65 1.46.65 2.67V14H49.2v2.02c0 1.05.3 1.57.98 1.57z" fill="#e62117"/></svg>
This means that it can be seen as more efficient to add this code into the page source, rather than referring to it as an external file, which then needs to be separately called and downloaded, although it could then benefit from any cache system in operation.
The other inline advantage is that we could change the parameters of the call. In our shortcode plugin, we can supply the height, width and colour of the lines to be used. This is then inserted into the SVG definition.
Inline
The plugin demonstrates the use of inline processing by providing a shortcode [feather] for some of the icons to be given, sized and set a line colour.
Images available
- Chrome
- Codepen
- Video – A video play icon.
- Youtube
Parameters
- height: default 24
- width: default 24
- image: default Facebook
e.g. [feather image=”facebook” width=”35″ height=”35″ stroke=”#900″]
<img
All of the icons can be used by a second shortcode which refers to the folder and image and allows the height and width to be supplied.
Images available
All given at http://feathericons.com
Custom / Youtube
Parameters
- height: default 24
- width: default 24
- folder: default core – we have kept to the same folder groups as the original collection.
- image: default award
e.g. [svgsrc folder=”COMMUNICATION” image=”phone” width=”35″ height=”35″ ]
Custom Icons
We were quick to spot that the Youtube logo was not present. So we have added a custom folder and put that in. Although small, it is nowhere near as small and efficient as the feather icons.
Download your copy of the FREE plugin here
