SVG & Animation: Implementation & adding SVG to a website
Implementation
In part 1 we talked about SVG: definition, syntax, and how to create an SVG image.
If you would like to go through the previous part. Click on this link https://medium.com/@merehan/svg-animation-part-1-2738461cdf94
Plus we created first SVG image by using Adobe Illustrator (smile.svg) and exported it as smile.svg
Methods
Unluckily, I got stuck on adding this image to my client project. So, I searched for a solution and found some interesting information.
There are two ways to do so
- Open the SVG image in any text /or code editor. Then, copy-paste the whole bunch of lines to HTML. This method is called “inline SVG” which we talked about some of its benefits in the previous article.
- Using SVG file as it’s a regular image in HTML. Following this method would prevent manipulating the SVG image to be animated or controlled with CSS & JavaScript.
Before going through inline SVG, we need to be familiar with at least HTML and CSS.
Inline SVG
It’s one of the two ways that we can use to add our SVG image to HTML since SVG image allows us to edit the image via any text editor where a markup language can be adjusted directly. Check the following image.
I remember in the previous part that I wrote down the hierarchy of my project folder, but let me make it clear by adding this illustration down here. We will need to work on the HTML file, as well as link CSS, JS and any other file from the assets folder to the HTML. That’s why it’s important to put all the files in one folder.
I am working on a website (front-end) project and I have a folder called clientx-project that contains 3 files:
- index.html
- style.css
- scripts.js
Plus 1 internal folder which contains the assets of my website such as images, videos, etc.
- assets folder
Now, Let’s focus on the steps of the first method.
Step 1
Open the folder where the SVG image is saved and then right-click with the mouse. Select Open with a text/code editor. For me I selected Atom, but TextEdit can be selected too if we don’t have Atom, for now only.
Select all these lines with the mouse or by pressing (command+A) on the keyboard.
Step 2
It’s a must now to have a code editor like Atom where we will open the whole project folder. Open Atom or any other code editor, and Open a project/ Add a Project Folder. Locate the project folder and then click on Open.
The following screenshot is the screen when the project folder is added to the code editor.
Step 3
Now, we need to click on index.html in order to open the code on the right side like in the previous screenshot. Create a new element <div> </div> inside the <body> </body> and paste the SVG image. Press (ctrl+v) or right-click and select paste.
Don’t forget to save your work regularly (ctrl+s).
After doing that, open your index.html in any browser to check the real work alive. Right-click on index.html on the left panel and select Copy Full Path. Go to your browser and paste the path as a URL address.
To be continued …
To know the process of creating SVG animation, keep following for the next article …
