About design and nearby

SVG for Web: Hover Over Effect

Posted: April 28th, 2016 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , | No Comments »

SVG (Scalable Vector Graphics) is an image format for vector graphics.

Sweet Web Design vector icon

I love to use SVG in web and mobile projects and applications because:

  • *.svg files have small file sizes and compress well.
  • *.svg files scale to any size without losing clarity.
  • *.svg files look great on retina displays.
  • You can manipulate the SVG file with CSS

You can create such vectors with Adobe Illustrator.

After you save your image as *.svg, open the inline svg with any editor:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!– Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  –>
  3. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  4. <svg version="1.1" id="butterfly" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  5.   width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
  6. <rect fill="#FFFFFF" stroke="#000000" stroke-width="0.9965" stroke-miterlimit="10" width="500" height="500"/>
  7. <ellipse fill="#B71C1C" cx="175" cy="226" rx="75" ry="125"/>
  8. <ellipse transform="matrix(-0.9266 -0.376 0.376 -0.9266 240.875 789.6445)" fill="#263238" cx="197.492" cy="371.317" rx="56.248" ry="18.75"/>
  9. <ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -107.5213 262.4124)" fill="#D32F2F" cx="263" cy="260.996" rx="124.998" ry="75"/>
  10. <circle fill="#263238" cx="135" cy="344" r="25"/>
  11. <path fill="#D32F2F" d="M319.298,310.75c0.412-0.404,0.825-0.807,1.235-1.217
  12.  c51.301-51.301,67.936-117.841,37.154-148.621c-30.779-30.78-97.319-14.146-148.621,37.156
  13.  c-44.184,44.183-62.649,99.667-47.259,133.877c4.179,10.199,10.633,19.222,18.739,26.436c2.251,2.297,5.148,4.496,8.622,6.574
  14.  c7.439,4.838,15.821,8.346,24.823,10.158c19.716,5.679,45.406,9.115,73.508,9.115c62.132,0,112.5-16.789,112.5-37.5
  15.  C400,329.699,365.943,315.323,319.298,310.75z"/>
  16. </svg>

The SVG looks a lot like HTML. You can open the source code and give class names or id to its elements (similar to any other HTML element can have).

I’d like to add a hover over effect on the object tag, say, replace the color of my butterfly’s wing. To implement that I add an ‘id’ to the patch which draws the background and place svg code into my page’ HTML:

SVG: source

Styles (CSS):

  1. #my-backgr { transition: 600ms; }
  2. svg:hover #my-backgr { fill:#ffc107; }

Check standalone example: How to make a SVG image change color when hovering over the object tag >>

I’m always glad to find ways to optimize the markup to increase the performance of the websites and apps I work on. Hope this post helpful for you too!

Share Button

Check Related Posts:


Leave a Reply


  • − two = 3

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now