SVG study

by davidxmartins

HTML

<header> 
<h1>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 80">         
<text x="0" y="60">
Awesome
</text>
</svg>
</h1>
</header>

<!--////////////////////-->

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">

<style>
#search-icon {
  fill: none;
  stroke: #000;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-width: 80px;
  }
 </style>

<title>Search</title>
	<path id="search-icon" d="M752.57,753.57L562.74,563.74c-118.44,118.44-310.47,118.44-428.91,0s-118.44-310.47,0-428.91s310.47-118.44,428.91,0s118.44,310.47,0,428.91"/>
</svg>

<!--////////////////////-->


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">

<style>
.bag,
.handle {
  fill:none;
  stroke:#000;
  stroke-linecap:round;
  stroke-miterlimit:10;
  stroke-width:77px;
  }
</style>

<title>shopping-bag</title>
<path class="bag" d="M688.46315,754H113.03685a38.462,38.462,0,0,1-38.24467-42.54507L130.25,192h541l55.45782,519.45493A38.462,38.462,0,0,1,688.46315,754Z" transform="translate(-36.57061 -6)"/>
<path class="handle" d="M544.5041,301l.48566-110.76025A144.23975,144.23975,0,0,0,400.75,46c-79.66142,0-144.23975,64.57834-144.23975,162.23975V301" transform="translate(-36.57061 -6)"/>
</svg>

CSS

header svg text {
	font-weight: 900;
  font-size: 90px;
  fill: blue;
  font-family: sans-serif;
}