SVG or Scalable Vector
Graphics is a markup language to describe two-dimensional graphics applications
and image is a W3C recommendation and is supported by all modern browsers for
desktops and mobile phones.
SVG has a small file size
and compressed well and still look good on retina displays as well as safe for
the zoom. For that, why do not we use it for our use SVG on the icons on the
blog. That way our blog will be lighter because they do not need to call the
css style library as well as the font icon.
How to use SVG icons on your
blog ?
To use SVG icons on the
icons on the blog, please do as below.
We can easily get the icons
of material-based SVG icons for web design in https://materialdesignicons.com. There are hundreds of icons,
including icons of social media for the purposes of the icons on the blog.
Then please click on the
icon you selected. Select the toggle code </> and select view SVG it will
show a box with code like the following as an example.
<svg
style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000"
d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1
12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
Please save SVG code above in the edit HTML. For example we will use the icon "account" on our profile link as below
<span class='post-author
vcard' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn
author'>
<a
expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' target='_blank'
title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn
author'><span itemprop='name'><data:post.author/></span></span>
</b:if>
</span>
It
will look like below
<span class='post-author
vcard' itemprop='author' itemscope='itemscope'
itemtype='https://schema.org/Person'>
<b:if cond='data:post.authorProfileUrl'>
<svg
style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000"
d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1
12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
<span class='fn author'>
<a
expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' target='_blank'
title='author profile'>
<span
itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn
author'><span
itemprop='name'><data:post.author/></span></span>
</b:if>
SVG images that have better
presence in the blog, then we move her style inline style = "width: 24px;
height: 24px" CSS style to be like this blog
.post-author svg {width:24px;height:24px;}
With the CSS code above we
also can easily adjust the size of the icon size.
And if we want to change the
color on her icon, we use the following css.
.post-author svg path {fill:
white;}
And if you want to use SVG
directly on CSS (such as background-image) do like below (using base64).
.post-author {background-image:url("data:image/svg+xml;charset=utf8,%3csvg
viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:white'
d='M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1
12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14
12,14Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-repeat:no-repeat;background-size:24px
24px;background-position:top left;background-color:transparent;}
If you want to use another
icon, just change Viewbox = '0 0 24 24' (if different) and also replace d =
'16,8A4,4 M12,4A4,4 0 0.1 0 0 0.1 12,12A4,4 8,8A4,4 0.1 0 0.1
12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z 'and the
color of the icon style =' fill: white '
How easy is not it? Good
luck....