SVG for Web: Hover Over Effect
Posted: April 28th, 2016 | Author: Julia | Filed under: Development, Tips and Tricks | Tags: *.svg, 1, hover over effect, SVG for web, vector graphics | No Comments »SVG (Scalable Vector Graphics) is an image format for vector graphics.
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:
-
<?xml version="1.0" encoding="utf-8"?>
-
<!– Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) –>
-
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
<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"
-
width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
-
<rect fill="#FFFFFF" stroke="#000000" stroke-width="0.9965" stroke-miterlimit="10" width="500" height="500"/>
-
<ellipse fill="#B71C1C" cx="175" cy="226" rx="75" ry="125"/>
-
<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"/>
-
<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"/>
-
<circle fill="#263238" cx="135" cy="344" r="25"/>
-
<path fill="#D32F2F" d="M319.298,310.75c0.412-0.404,0.825-0.807,1.235-1.217
-
c51.301-51.301,67.936-117.841,37.154-148.621c-30.779-30.78-97.319-14.146-148.621,37.156
-
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
-
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
-
C400,329.699,365.943,315.323,319.298,310.75z"/>
-
</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:
Styles (CSS):
-
#my-backgr { transition: 600ms; }
-
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!
Leave a Reply