SVG images as icons

Using Icon SVG(Scalable Vector Graphics) for icons

I remember the time when we used to have 100s of icons and we put all as a image, then we move to use icon sprite which reduced the image pull request to server and improved speed, but now a day as a revolution we start using icons as a SVG files its like a revolution in using icons. Ohh its such a revolution.

Benefit of using SVG file

  1. Small file size and it compress well.
  2. We can use it in any size and it will no loss its quality at all.
  3. Its look great on ratina screens as well.
  4. We can control its look and fill with different CSS filters.

Now a days if we try to search for any icons there are various site availabe which provide us free SVG(Scalable Vector Graphics) icons same as other format is images like JPEG(Joint Photographic Experts Group), PNG(Portable Network Graphics), GIF(Graphic Interchange Format).

Some Site from where we can download free SVG icons

For the same porpose we can use Fontawsome, Typicons, useiconic etc.

Or u can create ur own SVG icons using Adobe Illustrator easily. Then using some online tools we can convert then into font file and then we can use them in out projects, this is the best solution as in this we can just add the selected icons which we are using in our web so no extra icon wil be there.

Some tools which help use converting our SVG file into fonts
  1. this is the first tool I used for this purpose 🙂

So now we need not to create all time icons in different sizes, such a big relax, also we get rid of that dirty code due to all time image.



As a Front end developer we need solid base which gives us almost everything a typical website would require but also flexible enough for customization, We should thanks to all developers who worked hard and spend there time in create lots of Frameworks which make our work smooth and easy.

Now a days in market we have dozens of CSS frameworks here is my views in support of bootstrap

Bootstrap has responsive CSS adjusts to phones, tablets, and desktops. It have Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework. It have large number of Browser compatibility: Bootstrap is compatible with all modern browsers like Chrome, Firefox, Internet Explorer 8+, Safari, and Opera)

There are many reason to Adopt for bootstrap

  1. Easy to get started

  2. Grids

    Bootstrap is on responsive 12-col grid system, whether we need fixed layout or fluid layout, it will be just a small change we just choose class accordingly.

    Grid class examples:
    1. Extra small devices (Phones (<768px))


    2. Small devices (Tablets (≥768px))


    3. Medium devices (Desktops (≥992px))


    4. Large devices (Desktops (≥1200px))


  3. Base styling for most HTML elements

    1. Code
    2. Tables
    3. Forms
    4. Buttons
    5. Icons
    6. Typography
    7. Images
  4. It covers almost all elemens can be use like

    1. Dropdowns
    2. Progress Bar
    3. Navigations
    4. Forms Elements
    5. Labels & Badges
    6. Buttons
    7. Alerts
    8. Breadcrumbs
    9. And lots more
  5. Bundles of pre define JS for

    1. Navigation Bars
    2. Modals
    3. Sliders
    4. Dropdowns
    5. Tabs
    6. Accordions

    All of above we can always can modifiy all above as per out requirements

  6. Sass/Scss

    The industry’s finest CSS pre-processor, sitting on top of the enormously helpful Compass library, makes for a more modular, pragmatic approach to presentation.

  7. Documentation

    The biggest reason to choose bootstrap is it has great documentation with examples and demos which make the this transparent to us and we feel ease to get into it.

Link to get started:

CSS form

CSS Form

To Get the above result in a form please go thought the following code…

<title>Form Design</title>
border: 1px solid #781351;
width: 20em

color: #fff;
background: #758958;
border: 1px solid #781351;
padding: 2px 6px

<form action=”#”>
<legend>Testing Form</legend>
<p><label for=”name”>Name</label> <input type=”text” id=”name” /></p>
<p><label for=”e-mail”>E-mail</label> <input type=”text” id=”e-mail” /><br /></p>
<p class=”submit”><input type=”submit” value=”Submit” /></p>

Nested DIVs v/s nested TABLEs

If we have a bunch of nested DIVs. How is this better than the nested tables they replaced? Now the answer lies in the way the tag was intended to be used. DIVs imply a logical and structural grouping. Even when they are nested they remain structural markup. In our example we grouped images with their captions (first level), and then grouped these image/caption pairs with similar image/caption pairs (second level). These are both examples of structural grouping that is handled much better by the DIV tag.

Whenever, tables imply a relationship between column and/or row headers, and the data in the table cells. When we use them for layout, we lose the structural semantics of a table. And we are back to using HTML for layout. Nesting tables only compounds the problem and as well now a days its not ideal to use table for layout its not good for search engin results too.

Advance CSS

creating Navigation with CSS


<div id=”navigation”>
<li><a href=”index.html”><div id=”home”>Home</div></a></li>
<li><a href=”news.html”><div id=”news”>News</div></a></li>
<li><a href=”#”><div id=”how”>How it works</div></a></li>
<li><a href=”#”><div id=”affiliated”>Affiliated membership</div></a></li>
<li><a href=”#”><div id=”location”>our location</div></a></li>
<li><a href=”#”><div id=”about”>about us</div></a></li>
<li><a href=”#”><div id=”stuff”>hot stuff</div></a></li>
<li><a href=”#”><div id=”contact”>contact us</div></a></li>

CSS Code


<p id=”vjContent”>CSS3 I am loving it. </p>

Features Available in Radian And Goldberg

Features Radiant Goldberg
UI implementation Using radius Using Rails
Content management HTML + Text + Radius HTML + Text + FCKeditor
Content visibility management Status based User role based
User / Role Management Basic Advanced
Navigation Automatic Menu Editor
Extensible Add on (Behavior & Extensions) Easy integration of rails code
Default templates None Bundled
Welcome email None Can be configured
Technical knowledge required Basic to medium Medium to advanced