PubWriter Sandbox Tutorial - SVGs

<div class="sandbox">

# SVG's

## You can do so much more with SVGs!

It's a huge time saver when you can change all the image properties on the fly! This includes color, size and orientation!

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="blue"  viewBox="0 0 8 8">
  <path d="M4 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-1 1h2v3h2l-3 3-3-3h2v-3z" /></svg>

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="green"  viewBox="0 0 8 8" transform="rotate(0)"><path d="M4 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-1 1h2v3h2l-3 3-3-3h2v-3z" /></svg>

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="green"  viewBox="0 0 8 8" transform="rotate(90)"><path d="M4 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-1 1h2v3h2l-3 3-3-3h2v-3z" /></svg>

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="green"  viewBox="0 0 8 8" transform="rotate(270)"><path d="M4 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-1 1h2v3h2l-3 3-3-3h2v-3z" /></svg>

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="green"  viewBox="0 0 8 8" transform="rotate(180)"><path d="M4 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-1 1h2v3h2l-3 3-3-3h2v-3z" /></svg>

### You can animate 'em too!

<s align="center"><div id="rotator"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="black"  viewBox="0 0 8 8" transform="rotate(1)"><path d="M4 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-1 1h2v3h2l-3 3-3-3h2v-3z" /></svg></div></s>

Requires a little CSS trickery:

<style>

#rotator svg{
    transform-origin:50% 50%;
    animation:10s rotateRight infinite linear;
}
@keyframes rotateRight{
    100%{ transform:rotate(360deg); }
}
</style>

<a href="https://meetup.com/softec" class="btn btn-link btn-lg"><svg height='75px' fill="red" stroke="black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" x="0px" y="0px"><g data-name="Layer 2"><path d="M29,8H26V5a1,1,0,0,0-1-1H3A1,1,0,0,0,2,5V23a1,1,0,0,0,1,1H6v3a1,1,0,0,0,1,1H29a1,1,0,0,0,1-1V9A1,1,0,0,0,29,8ZM4,22V6H24V8H7A1,1,0,0,0,6,9V22Zm8-10a2,2,0,1,1-2,2A2,2,0,0,1,12,12ZM25.89,23.46A1,1,0,0,1,25,24H11a1,1,0,0,1-.89-.55,1,1,0,0,1,.09-1.05l3-4a1,1,0,0,1,1.25-.29l1.35.67,3.49-3.49a1,1,0,0,1,.79-.29,1,1,0,0,1,.73.42l5,7A1,1,0,0,1,25.89,23.46Z"></path></g></svg></a>

On Buttons

<a class="btn btn-primary btn-lg" href="https://www.dropbox.com/home/pubwriter/pubwriter.net/images/icons"> <svg height='75px' fill="black" stroke="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" x="0px" y="0px"><g data-name="Layer 2"><path d="M29,8H26V5a1,1,0,0,0-1-1H3A1,1,0,0,0,2,5V23a1,1,0,0,0,1,1H6v3a1,1,0,0,0,1,1H29a1,1,0,0,0,1-1V9A1,1,0,0,0,29,8ZM4,22V6H24V8H7A1,1,0,0,0,6,9V22Zm8-10a2,2,0,1,1-2,2A2,2,0,0,1,12,12ZM25.89,23.46A1,1,0,0,1,25,24H11a1,1,0,0,1-.89-.55,1,1,0,0,1,.09-1.05l3-4a1,1,0,0,1,1.25-.29l1.35.67,3.49-3.49a1,1,0,0,1,.79-.29,1,1,0,0,1,.73.42l5,7A1,1,0,0,1,25.89,23.46Z"></path></g></svg><br>SVG on a button!</a>

In order to get the SVG path coordinates, you'll need to open the .svg file in a plain text editor (I use atom).

## Make 'em spin too!
<div id="rotator"><img src="https://pubwriter.net/images/icons/yingYang.svg" height='50px'></div>