I have found the answer to my own questions after looking and luckily finding exactly what it is I am trying to do and looking for.

The reason why i am so interested in doing this is because to create cool clip paths and shoving the picture or text inside one can do amazing things with that attributes but also the file size will be extremely small as it is just an svg graphic.

Here is a tutorial on the subject from coderwall.com... And wait it gets better.

Here is a the website where the tutorial was originated. 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 the example

And here is their front page and I want to do a tutorial on when I can master it.

The technical parts of what is going on is this.

With SVG 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.

As well, this is a tutorial and write up about Drawing Text in/on SVG Images...

Finally, the idea of clipping or using clip paths is explained nicely here.

I think this is cool and definitely apart of the future.

I can't post links so I removed many of them. sorry guys I need a better reputation. I will post them at the bottom if I can.

Edit, more links:

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

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

I have found the answer to my own questions after looking and luckily finding exactly what it is I am trying to do and looking for.

The reason why i am so interested in doing this is because to create cool clip paths and shoving the picture or text inside one can do amazing things with that attributes but also the file size will be extremely small as it is just an svg graphic.

Here is a tutorial on the subject from coderwall.com... And wait it gets better.

Here is a the website where the tutorial was originated. 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 the example

And here is their front page and I want to do a tutorial on when I can master it.

The technical parts of what is going on is this.

With SVG 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.

As well, this is a tutorial and write up about Drawing Text in/on SVG Images...

Finally, the idea of clipping or using clip paths is explained nicely here.

I think this is cool and definitely apart of the future.

I can't post links so I removed many of them. sorry guys I need a better reputation. I will post them at the bottom if I can.

I have found the answer to my own questions after looking and luckily finding exactly what it is I am trying to do and looking for.

The reason why i am so interested in doing this is because to create cool clip paths and shoving the picture or text inside one can do amazing things with that attributes but also the file size will be extremely small as it is just an svg graphic.

Here is a tutorial on the subject from coderwall.com... And wait it gets better.

Here is a the website where the tutorial was originated. 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 the example

And here is their front page and I want to do a tutorial on when I can master it.

The technical parts of what is going on is this.

With SVG 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.

As well, this is a tutorial and write up about Drawing Text in/on SVG Images...

Finally, the idea of clipping or using clip paths is explained nicely here.

I think this is cool and definitely apart of the future.

I can't post links so I removed many of them. sorry guys I need a better reputation. I will post them at the bottom if I can.

Edit, more links:

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