Pages

▼

Thursday, 23 June 2022

Celebrating 10 Years Anniversary SVG Animation

 Celebrating 10 Years Anniversary SVG Animation




Step to create and animate SVG File

SVG is numeric formate of graphic representation. You can create SVG files easily using Coral Draw. Create a graphic in the coral draw and export it in SVG format. One's SVG file was extracted. You will get the code of the entire file in SVG format.

Apply CSS animation code as you apply in HTML file

HTML File Code : 

<html>

<head>

    <title>SVG</title>

</head>

<body>

    <style>

     

    </style>

    <object data="akt.svg" width="500" height="500"> </object>

    <p class="rotate">Lorem</p>

</body>

</html>


SVG File Code :


<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<!-- Creator: CorelDRAW X7 -->

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1000px" height="700px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"

viewBox="0 0 1000 700"

 xmlns:xlink="http://www.w3.org/1999/xlink">

 <defs>

  <font id="FontID2" horiz-adv-x="634" font-variant="normal" style="fill-rule:nonzero" font-style="italic" font-weight="700">

       <font-face

              font-family="Tw Cen MT">

       </font-face>

   <missing-glyph><path d="M0 0z"/></missing-glyph>

   <glyph unicode="t" horiz-adv-x="280"><path d="M123.012 561.015l118.989 0 -21.6791 -148.007 55.6716 0 -17.3187 -119.02 -54.6889 0 -43.9722 -293.988 -119.02 0 43.0203 293.988 -45.9989 0 17.1651 119.02 46.1524 0 21.6791 148.007z"/></glyph>

   <glyph unicode="s" horiz-adv-x="312"><path d="M286.986 362.003l-60.9838 -61.9972c-22.9994,21.3413 -43.3274,31.9966 -61.0146,31.9966 -8.65934,0 -17.5029,-3.16281 -25.978,-9.67266 -8.69004,-6.50986 -13.0197,-14.6779 -13.0197,-24.3198 0,-13.3575 4.51391,-24.6883 13.511,-33.839 8.99711,-9.33489 26.9913,-20.5122 53.6756,-33.839 26.8378,-13.3268 46.6437,-28.1582 59.4792,-44.6785 12.8355,-16.3053 19.3453,-37.3088 19.3453,-62.642 0,-35.8349 -14.6779,-67.0024 -44.0029,-93.3489 -29.3251,-26.5 -63.9931,-39.6733 -104.158,-39.6733 -56.3471,0 -100.995,27.6669 -133.851,83.1849l67.0024 51.8332c19.4989,-29.3558 40.8401,-44.0029 63.9931,-44.0029 12.3442,0 23.0302,3.50058 31.843,10.5018 8.84358,7.00117 13.1732,15.6605 13.1732,25.8245 0,10.6553 -4.66744,20.3279 -14.0023,28.8338 -9.48842,8.5058 -26.9913,19.4989 -52.8465,33.0099 -50.8199,26.9913 -76.153,64.3309 -76.153,111.834 0,37.8309 13.6646,69.1519 40.9937,93.8095 27.3291,24.8419 61.6594,37.186 103.022,37.186 44.1565,0 84.1368,-19.9902 119.972,-60.0012z"/></glyph>

  </font>

  <font id="FontID1" horiz-adv-x="587" font-variant="normal" style="fill-rule:nonzero" font-weight="400">







at

No comments:

Post a Comment