¿Cómo puedo crear máscaras de recorte SVG?

He encontrado la respuesta a mi propia pregunta.

Aquí hay un tutorial sobre el tema de coderwall.com . Es increíble y ese tipo de estilo y trabajo gráfico es justo de lo que estoy hablando. Puedes hacer hovers y animaciones ricas que son súper livianas.

Aquí está su ejemplo

Las partes técnicas de lo que está pasando son:

• Con SVG podemos agregar un trazado de recorte para cambiar la forma de nuestras imágenes.

• Utiliza el elemento SVG para agrupar formas SVG.

Más referencias:

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

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

No estoy seguro de haber entendido tu pregunta por completo, pero me voy a arriesgar.

Según tengo entendido, desea círculos con imágenes (imágenes circulares) en una página web. La forma más fácil de lograr esto es simplemente diseñar las imágenes, los contenedores div para la imagen. Aquí está el css para simplemente hacer un círculo:

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

Esto te dará esto:

Luego puede agregar una imagen de fondo a esto agregando:

background-image:url('http://i.stack.imgur.com/UEJFV.gif?s=128&g=1?s=128&g=1');
background-position:center; 

Esto te dará esto:

Para un efecto de desplazamiento, puede hacer otro div para envolver el anterior:

.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;
}

Para ver el código completo, incluido el efecto de desplazamiento, consulte este JSfiddle

No solo es posible, sino que es ampliamente utilizado. SVG se usa para todo tipo de símbolos en muchos sitios, incluidos los íconos de fuentes. Para muchos de mis clientes, lo usamos para el menú "hamburguesa", íconos de facebook y twitter.

Busque esto en Google y encontrará una multitud de ejemplos de uso. Para cosas simples, si le importa estudiar el código, puede crearlas usando cualquier editor simple.

No todos los navegadores son compatibles con svg, y también existen diferencias entre uno y otro.

Primero pregúntese si la cantidad adicional de trabajo y problemas vale la pena. Entonces comprueba esto:

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

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

Saludos