HTML Archives - LoudProgrammer

HTML

How to Create SVG Images

How to Create SVG Images

HTML, Tutorials
SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. In HTML5, you can embed SVG elements directly into your HTML pages as images and use them for cool effects such as animations. In this tutorial we are going to create a square image using SVG and animate it by sliding across the screen from the left to the far right on mouseover. As the square begins to scroll it has a blue background color but once it reaches the far right corner the background color changes to red. You can view a live demo of the finished sliding square project here. Feel free to download the code for this sliding svg square image project from github. In your project directory create three directories and the index.html file as shown below. [crayon-59502322bef5a00227...