![\"\"](\"https:\/\/www.thecoderschool.com\/blog\/wp-content\/uploads\/2021\/04\/SVG-300x297.png\")
<\/h2>\n<\/h2>\nBy Daniel K., Age 14<\/strong><\/p>\n Raster graphics and vector graphics. The difference between the two is that while raster graphics usually work better for images, they get pixelated or blotchy if you zoom in too much. However, vector graphics use math to display images. Although vector graphics don\u2019t work for images, they can make illustrations. However, the best part about vector graphics is that you can zoom in however much you want and have the image stay sharp. Websites use vector graphics in the form of <svg> tags.<\/span><\/p>\n However, the best thing about SVGs in websites is that you can control how they are displayed. For instance, you could animate their colors with CSS or even change their appearance with Javascript.\u00a0<\/span><\/p>\n To learn how you would go about doing that, we first need to understand a bit about SVGs. SVG files are a lot like HTML. If you open a .svg file in a text editor, you will see something that looks a lot like HTML code, but with some new tags. This will be useful later. There are two ways to add an SVG to your HTML: use an image tag that points to a .svg file, or embed the file straight in the HTML.<\/span><\/p>\n The first type of SVG is the simplest to implement, but offers none of the cool tricks I\u2019m about to show you. You can implement it by using an IMG tag with a source ending in .svg (<\/span><img src=\u201dsomeDirectory\/example.svg\u201d><\/span><\/i>).<\/span><\/p>\n The second type of SVG, however, takes the contents of the .svg file and copy-pastes them directly onto the HTML page. This works since SVGs are formatted a lot like HTML and almost all major browsers support SVGs. This way of adding SVGs to your webpage is much better as it allows you to directly modify the SVG data using Javascript.<\/span><\/p>\n An SVG consists of an <\/span><svg><\/span><\/i> tag, which contains all of the metadata for the SVG. This isn\u2019t very important for our purposes, so act as if that tag is a <\/span><div><\/span><\/i> containing the actual drawing. Inside the <\/span><svg><\/span><\/i> tag, you will find one or more <\/span><g><\/span><\/i> tags. These tags mainly handle the layers for the SVG. You won\u2019t need those either, unless you\u2019re planning on transforming entire SVG layers with the <\/span>transform=\u201dmatix()\u201d<\/span><\/i> attribute. The thing we\u2019re looking for is inside the <\/span><g><\/span><\/i> tag. This is where the main graphics-drawing takes place.<\/span><\/p>\n Although you may see some <\/span><rect><\/span><\/i>, <\/span><ellipse><\/span><\/i>, <\/span><polygon><\/span><\/i>, and <\/span><polyline><\/span><\/i> tags, most SVGs are made primarily out of <\/span><path><\/span><\/i> tags. All drawing tags can contain a <\/span>fill <\/span><\/i>attribute, as well as several other attributes specific to drawing a shape. For instance, the <\/span><line><\/span><\/i> tag has <\/span>x1<\/span><\/i>, <\/span>y1<\/span><\/i>, <\/span>x2<\/span><\/i>, and <\/span>y2<\/span><\/i> attributes that determine the two edges of that line, while the <\/span><path><\/span><\/i> tag has a <\/span>\u201cd\u201d<\/span><\/i> attribute that dictates the shape drawn.<\/span><\/p>\n Now comes the fun part: modifying the SVG. Since each drawing tag in an SVG is like an HTML tag, we can add IDs to them. Then, when the user does something, we can access them through CSS and apply styling to the shapes as you would normally.<\/span><\/p>\n To do more complex things with the shape, for instance change it with JS, we can use the <\/span><animate><\/span><\/i> tag. When an event is triggered, we can add the animate tag inside the drawing tag, like this:<\/span><\/p>\n <g><\/span><\/i><\/p>\n <path d=\u201dsome value\u201d><\/span><\/i><\/p>\n <<\/span><\/i>animate<\/i><\/b>><\/span><\/i><\/p>\n <\/path><\/span><\/i><\/p>\n <\/g><\/span><\/i><\/p>\n We can then add an <\/span>attributeName<\/span><\/i> attribute to the animate tag in order to specify the attribute that should be animated, in this case <\/span>\u201cd\u201d<\/span><\/i>. We can also give the animate tag a <\/span>values<\/span><\/i> attribute, which specifies the attribute values to animate, separated by semicolons. In this case, we can specify <\/span>\u201csome value;another value\u201d<\/span><\/i> since we want the path\u2019s <\/span>d<\/span><\/i> attribute to animate from some value to another value. Specifying a <\/span>dur<\/span><\/i> attribute for the animation allows you to customize the duration the animation lasts.<\/span><\/p>\n Congratulations, you can now animate SVGs. When making websites, you can apply this in interesting ways, such as making animated buttons or backgrounds.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":" By Daniel K., Age 14 In web design (and in all computer graphics), there are two types of images: Raster graphics and vector graphics. The difference between the two is that while raster graphics usually work better for images, they get pixelated or blotchy if you zoom in too much. However, vector graphics use math … <\/p>\nIn web design (and in all computer graphics), there are two types of images:<\/span><\/h2>\n