What is SVG (Scalable Vector Graphics)? - Data Visualization Tutorial

What is SVG (Scalable Vector Graphics)? is a free tutorial by Luis Ramirez Jr from Data Visualization course
Link to this course(Special Discount):
This is the best Data Visualization Course
Course summary:
Create stunning data visualizations using D3 and SVG
Build interactive map visualizations with GeoJSON
Understand selections to manipulate the DOM using D3
Learn about layouts to build various charts and graphs
Create choropleth maps to display visual patterns on geographical locations.
Add transitions and animations to your graphs for a more interesting user experience
Use scales to help make your visuals work on any browser or device.
Understand the enter and exist modes in D3
Create responsive charts and graphs
English
In this lecture we're going to learn about something called SVG. SVG is short for scalable vector graphics. D3 heavily relies on SVG to create the graphs and charts it generates. SVGs have been around for a long time and they're quite powerful. SVG is a text based image format. When ever we think of images we tend to think of a group of pixels on the screen all combined together to make up something we can visually recognize. You can use programs like Photoshop or Microsoft Paint to create images. The cameras on phones can take pictures that we upload onto the Web as an image. Some of the most common formats for images are jpeg PNG and gifs. Another format is SVG. However SVGs aren't generated like traditional images. Rather than it being something that a program or device can generate. It's generated with code. Code that you can read or write. There are programs out there that can generate SVG images but we'll get to that soon enough. I want to step back for a moment and take a look at this phrase scalable vector graphics. This may seem like an odd name but it's not. Once you understand what each word means let's start with vector first. A vector is an image generated through math equations and commands. Let's take a look at a vector and a regular image. Right now I have a program called illustrator open. You do not need to have Illustrator installed as this is just an example. As you can see I have these two circles the one on the left is a vector and the one on the right is a regular image. From this distance. They both look fairly normal but let's see what happens when I begin to zoom in on both of these images as I zoom in. You'll notice that the vector on the left still looks nice and crisp but the image on the right is starting to look pixilated. Eventually it will come to a point where the vector image just looks so much better than the regular image. It doesn't matter how far we zoom in or out. The vector will always look consistent and clean. The regular image will continue to look distorted and pixilated. This is because the vector is created using math to always look good. Let's take a look at another example. I'm going to zoom back out so we can see both images. If you've ever tried to resize an image you should know that the result is never really that great unless that image is high quality and big. Even then the results won't be that great. I'm going to resize the image on the right. I'm just going to change its height and make it look like a squeezed circle. As you can see the width of the edge of the circle loses its consistency. The sides on the left and right are nice and thick but the top and bottom sides are thin. I'm going to do the same to the vector image. As I scale it down the vector image will still keep its width. No matter what size I scale it to. This is what's called scalable vector graphics. It's an image that's created using mathematics and commands. It can be scaled to be smaller or larger and it will never become pixilated. The advantage to using SVG images is clear. Now you may be wondering why don't all images just be SVG images. Well that's a really good question and the answer is quite simple. SVG images require a lot of resources. If you want to have an image that is extremely detailed. Then you would require a lot of power to generate that image. Even trying to move it can be difficult. SVG images are perfect for basic shapes and graphics. It's primarily used for creating animations or web graphics. It's also great for comics and basically anything that isn't super detailed. Illustrator allows you to export any image you create as a PNG, jpeg, gif, And even an SVG image. I'll show you how to do that soon But let's take a look at what's inside an SVG image. I told you earlier that SVG images can be created with code. In the next lecture will see how to do just that. Before you move on to the next lecture. I want to make one important note since we'll be using D-3 D-3 will tak