Inmotus SVG Generator is available to edit SVG graphics: icons, stickers, labels, logotypes on BundleSpace(.com)

Discount for premium graphics on BundleSpace(.com)

Share link:

Choose the standard method to implement SVG object to HTML in <BODY> using constructions <SVG> and included constructions.

View example SVG source:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve" class="lessonSlide">
<g>
<path fill="none" stroke="#27ae60" stroke-width="3" stroke-miterlimit="10" d="M138.768,100c0,21.411-17.356,38.768-38.768,38.768 c-21.411,0-38.768-17.356-38.768-38.768c0-21.411,17.357-38.768,38.768-38.768"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="8s" repeatCount="indefinite"/>
</g>
<g>
<path fill="none" stroke="#2ecc71" stroke-width="3" stroke-miterlimit="10" d="M132.605,100c0,18.008-14.598,32.605-32.605,32.605 c-18.007,0-32.605-14.598-32.605-32.605c0-18.007,14.598-32.605,32.605-32.605"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="4s" repeatCount="indefinite"/>
</g>
<g>
<path fill="none" stroke="#16a085" stroke-width="3" stroke-miterlimit="10" d="M126.502,100c0,14.638-11.864,26.502-26.502,26.502 c-14.636,0-26.501-11.864-26.501-26.502c0-14.636,11.865-26.501,26.501-26.501"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="2s" repeatCount="indefinite"/>
</g>
<g>
<path fill="none" stroke="#1abc9c" stroke-width="3" stroke-miterlimit="10" d="M120.494,100c0,11.32-9.174,20.494-20.494,20.494 c-11.319,0-20.495-9.174-20.495-20.494c0-11.319,9.176-20.495,20.495-20.495"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="1s" repeatCount="indefinite"/>
</g>
</svg>

View example of implement SVG to HTML:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://bundlespace.com/intro/js/jquery.js"></script>
<title>Loading screen</title>
</head>
<body>
<div class="gradient loading-page">
<div class="counter fadeIn">
<span class="loading">Loading</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<g>
<path fill="none" stroke="#27ae60" stroke-width="3" stroke-miterlimit="10" d="M138.768,100c0,21.411-17.356,38.768-38.768,38.768 c-21.411,0-38.768-17.356-38.768-38.768c0-21.411,17.357-38.768,38.768-38.768"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="8s" repeatCount="indefinite"/>
</g>
<g>
<path fill="none" stroke="#2ecc71" stroke-width="3" stroke-miterlimit="10" d="M132.605,100c0,18.008-14.598,32.605-32.605,32.605 c-18.007,0-32.605-14.598-32.605-32.605c0-18.007,14.598-32.605,32.605-32.605"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="4s" repeatCount="indefinite"/>
</g>
<g>
<path fill="none" stroke="#16a085" stroke-width="3" stroke-miterlimit="10" d="M126.502,100c0,14.638-11.864,26.502-26.502,26.502 c-14.636,0-26.501-11.864-26.501-26.502c0-14.636,11.865-26.501,26.501-26.501"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="2s" repeatCount="indefinite"/>
</g>
<g>
<path fill="none" stroke="#1abc9c" stroke-width="3" stroke-miterlimit="10" d="M120.494,100c0,11.32-9.174,20.494-20.494,20.494 c-11.319,0-20.495-9.174-20.495-20.494c0-11.319,9.176-20.495,20.495-20.495"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="1s" repeatCount="indefinite"/>
</g>
</svg>
</div>
</div>
<style>
@import "compass/css3";
body{
width:100%;
height:100%;
background:#27ae60;
color:#fff;
font-family:Roboto, sans-serif;
font-size:120px;
padding:0;
margin:0;
}
span.loading {
position: absolute;
top: 30px;
right: 80px;
z-index: 1000;
width: 120px;
height: 40px;
font-size: 32px;
line-height: 1em;
}
div.gradient {
width:100%;
height:100%;
position:fixed;
background: linear-gradient(-45deg, #234431, #27ae60, #16a085, #1abc9c);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
.counter{
position: relative;
left: calc(50% - 150px);
top: calc(50% - 45px);
border: none;
width: 260px;
height: 80px;
border-radius: 100px;
padding: 10px 0 0 40px;
overflow: hidden;
background: rgba(0,0,0,0.3);
border-radius: 200px;
z-index: 1000;
}
$skew:20deg;
.counter-value{
position:absolute;
transform-origin:0 100%;
transform:skew($skew,0);
z-index:1000;
overflow:hidden;
//border:1px dotted green;
padding-right:30px;
height:1em;
}
.counter-value-mask{
position:absolute;
transform-origin:0 100%;
transform:skew(-$skew);
//border:1px dotted pink;
overflow:hidden;
line-height:1em;
z-index:1000;
}
svg{
position: relative;
top: -58px;
left: -94px;
zoom: 85%;
z-index: 1000;
}
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
</style>
</body>
</html>

Full information about implement SVG to HTML 5 is presented in tutorial lesson using step by step actions and video for preview. Read lesson

Preview example Download source

Notice

Inmotus SVG Generator is available on PC & Mac.

Minimum screen resolution: 1000x660px.

OK