SVG Icon – My Point of View

SVG Path and Path Data

Ever wonder, what is SVG path?

A path represents the outline of a shape which can be filled or stroked. A path can also be used as a clipping path, to describe animation, or position text. A path can be used for more than one of these functions at the same time. (See Filling, Stroking and Paint Servers, Clipping and Masking, Animation (‘animateMotion’), and Text on a Path.)

A path is described using the concept of a current point. In an analogy with drawing on paper, the current point can be thought of as the location of the pen. The position of the pen can be changed, and the outline of a shape (open or closed) can be traced by dragging the pen in either straight lines or curves.

Microsoft Expression Design has a handy feature of Edit->Copy Xml that copies the path data of the shape to clipboard. This data can be used like this;

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Expression Web and HTML5</title>
</head>

<body>
    
<svg width="228px" height="253px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="red"
    d="M 10,30
       A 20,20 0,0,1 50,30
       A 20,20 0,0,1 90,30
       Q 90,60 50,90
       Q 10,60 10,30 z" />
</svg>

<svg width="228px" height="253px" viewBox="0 0 228 253">
    <desc>Yellow banana demonstrating path data syntax.</desc>

<g class="banana">
      <path fill="none" stroke="#f7c562" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" d="    M8.64,223.948c0,0,143.468,3.431,185.777-181.808c2.673-11.702-1.23-20.154,1.316-33.146h16.287c0,0-3.14,17.248,1.095,30.848
      c21.392,68.692-4.179,242.343-204.227,196.59L8.64,223.948z" />
      <path fill="none" stroke="#f7c562" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" d="    M8.767,230.326c0,0,188.246,40.154,196.485-160.139" />
    </g>
  </svg>

</body>

</html>

Here is the output;

Amazing…

Reference

https://www.w3.org/TR/SVG2/paths.html

https://www.codeproject.com/Articles/237451/Using-the-Copy-XAML-Feature-in-Expression-Design-t

https://www.sitepoint.com/closer-look-svg-path-data/

Create your own web font with just the icons you need

I love Bootstrap Icons. It has a large selection of quality icons and it’s open source so can be used for free (subject to license terms and conditions).

The simple way to use the icons on your website is to use the web font, but that means you are including all 1,800 plus icons (as of v1.10), albeit the file is a reasonable 120kb.

But using a free online tool, you can create your own web font with just the icons you need.

Here’s how I use Bootstrap Icons…

Download the icons

Go to the Bootstrap Icons download page on Github and download the bootstrap-icons-x.zip ZIP file.

Choose which icons you want to include

Unzip and open the file. The icons are the SVG files in the root of the ZIP file.

You may find it easier to create a temporary new folder to store the icons you want in.

Make your own web font

I use the IcoMoon app to easily create a custom web font.

Head on over to icomoon.io/app.

Press Import Icons (near top left of page) and select all of the icon SVG files that you want in your font.

You can either add files one at a time or you can select multiple files at once.

Once you proceed, your selected icons will appear as “Untitled Set”. You still need to highlight each of your icons to select them so that they get included in your custom web font. You can select one at a time or multiple select or select all.

Next step is to press Generate Font (bottom right of page). This will show details of your new font and expose a Download button so you can download a ZIP file containing what you need.

The ZIP file has style.css which you will need to include or better still, add to your HTML template or existing style sheet.

There is also a fonts folder which you will need to copy to your website as it contains the actual web font.

Lastly, there is demo.html which contains examples of how to include your chosen icons in your HTML.

The icon classes are named icon- and then the file name without extension. So you would typically use as follows:

 <span class="icon-check2"></span>

To use these fonts in ASP.NET Core, Add them to wwwroot -> lib folder (create a new folder). Open _Layout.cshtml view in Shared folder and add this line in header;

<!--Bootstrap icons-->
<link href="~/lib/bootstrap-icon/style.css" rel="stylesheet" />

You are ready to use these icons.

Accessibility

If your icon is purely decorative, then hide it from screen readers:

<span class="icon-arrow-right-circle" aria-hidden="true"></span>

If your icon is semantic, then you will need to provide alternative text for screen readers. This example is based on what font awesome recommends:

<span aria-hidden="true" class="icon-bluetooth" title="Bluetooth"></span>
<span class="sr-only">Bluetooth</span>
<span>enabled</span>

Credits:

http://johna.compoutpost.com/blog/1275/how-i-use-the-new-bootstrap-icons-web-font/

How to use the new Bootstrap Icons v1.10 web font

With the release of Bootstrap Icons v1.10, there is now an easy-to-use web font. Here’s how you can use the new web font in your web pages.

Step 1 – Download the Bootstrap Icons files

Go to icons.getbootstrap.com and download the latest release. There is a download button at the top-right corner of the page.

Step 2 – Install the Bootstrap Icons files

To use the web font on your web site you will need to extract a few files from the ZIP file.

From the fonts folder you will need bootstrap-icons.css and the fonts folder (the one inside the first fonts folder) with the bootstrap-icons.woff and bootstrap-icons.woff2 files.

Copy the CSS file and fonts folder to your website. You can copy the files to your web root folder but typically you would copy them to a folder that contains your other CSS files.

Step 3 – Include the Bootstrap Icons CSS file in your web pages

To be able to use the fonts in your web pages you will need to include the bootstrap-icons CSS file in your HEAD section of your HTML. How this is done will vary on the type of website. If you have simple HTML pages then you would need to add this to each page where you want to use the web font. If you are using a content management system like WordPress then this can be done in a template. If you are not sure use Google to search for how to add a CSS file to your CMS.

To include the CSS file you would add something like this:

<link href="bootstrap-icons.css" rel="stylesheet">

(CSS file is in same folder as the HTML document)

<link href="/bootstrap-icons.css" rel="stylesheet">

(CSS file is in your web root folder)

<link href="/css/bootstrap-icons.css" rel="stylesheet">

(CSS file is in your CSS folder)

Step 4 – Using the Bootstrap Icons web font

To include one of the icons you simply add the web font code that you can find on the Bootstrap Icons website.

For example:

<i class="bi-alarm"></i>

Each icon has it’s own class (eg. bi-alarm), and you can find these by clicking an icon on the Bootstrap Icons website.

Full example:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
	<link href="bootstrap-icons.css" rel="stylesheet">
	<title>Hello, world!</title>
</head>
<body>
	<div class="container">
		<h1>Bootstrap Icons v1.2 Example</h1>
		<p>
			<i class="bi-alarm"></i>
		</p>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>

ICONS fonts Vs SVG ICONS

Before the discourse of icon fonts vs SVGs, when browsers had non-existent CSS support, images were the only way for developers to showcase icons using the classic tag. Here is an example of an image icon.

<a href="contact-us.html">
       <img loading="lazy" src="mail.jpg" alt="email" />
</a>

Icon fonts are vectors making them scalable to any resolution, still they are not free from snags. Using icon fonts can lead to the generation of multiple server requests and can also lead to invisible text flashing during the period when font libraries are still loading. If the browser for some reason does not comprehend the icon font, a blank space is displayed. This is the reason why a lot of developers prefer the latter in icon fonts vs SVG icons.

Verdict on Icon Fonts vs SVG Icons – File Size : As far as file size is concerned Icon font has a slight advantage over SVG. However the difference in file sizes is not that prominent and can be ignored.

Verdict on Icon Fonts vs SVG Icons – Accessibility: When it comes to accessibility, SVG is the clear winner.

Verdict on Icon Fonts vs SVG Icons – Performance: SVGs have a slight edge as Icon fonts are susceptible to occasional failures.

Verdict on Icon Fonts vs SVG Icons – Scalability : In terms of scalability, SVGs have a big advantage over Icon fonts.

Verdict on Icon Fonts vs SVG Icons – Animation : SVGs over a much higher degree of versatility as compared to Icon Fonts in terms of modifications and styling control.