How to Use SVG Icons For Icons Blog
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....
0 Response to "How to Use SVG Icons For Icons Blog"
Post a Comment