How can I create SVG clipping masks?

Question

I want to take a circle that has a blue border and a picture inside, and clip the picture so it fits inside the circle nicely. I'd prefer to use very small files, perhaps cut down in sprites.

Once I have the clipping mask (sort of like Photoshop), I want to add a hover css animation to it.

Answer 1

I have found the answer to my own question.

Here is a tutorial on the subject from coderwall.com. It is amazing and that type of styling and graphical work is just what I am talking about. You can do rich hovers and animations that are super light weight.

Here is their example

The technical parts of what is going on are:

• With SVGs we can add a clipping path to change the shape of our images.

• It uses the SVG element is used to group SVG shapes together.

More references:

www.web-expert.it/summer-lab/summer-lab.html

www.tutorials.jenkov.com/svg/g-element.html

www.tutorials.jenkov.com/svg/text-element.html#text-example

tutorials.jenkov.com/svg/clip-path.html

Answer 2

I am not sure if I understand your question entirely, but I am going to take a chance.

As far as I understand, you want circles with images (circular images) on a web page. The easiest way of achieving this, is to simply style the images, the div containers for the image. Here is the css for simply making a circle:

   .circle {
        width: 120px;
        height: 120px;
        border: 5px solid red;
        -moz-border-radius: 60px;
        -webkit-border-radius: 60px;
        border-radius: 60px;
    }

This will give you this:

Then you can add a background image to this by adding:

background-image:url('https://i.sstatic.net/UEJFV.gif?s=128&g=1?s=128&g=1');
background-position:center; 

This will give you this:

For a hover effect, you can make another div to wrap the previous:

.fade {
float: left;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
    opacity: 0.5;
}

To see the entire code including the hover effect, see this JSfiddle

Answer 3

Not only is it possible but it's widely used. SVG is used for all kinds of symbols on a lot of sites, including font icons. For many of my clients, we use it for the menu "hamburger", facebook and twitter icons.

Google for this and you will find a multitude of examples of usage. For simple things, if you care to study the code, you can create them using any simple editor.

Answer 4

Not every browser supports svg, and there are differences also between on and other.

First ask your self if the additional amount of work and problems is worth the case. Then check this:

http://www.w3schools.com/svg/svg_examples.asp

http://css-tricks.com/using-svg/

regards