SVG stands for Scalable Vector Graphics. It\u2019s a type of graphic format widely used in web design. SVG was developed by World Wide Web Consortium \u2013 W3C between 1998 and1999. It was then created as an open-standard XML based vector image and was officially released in September 2001. SVGs are especially useful because they are scalable and lightweight which beats traditional images like JPEGSs or PNGs. The can be scaled across a wide range of dimensions without losing its quality. This is why they are great for responsive web designs, icons, logos, illustrations and interactive graphics.<\/p>\n\n\n\n
SVGs use mathematical formulas to create lines, shapes, colours and paths instead of pixels, which allows the image to be sharper.<\/p>\n\n\n\n
Here is a comparison between a PNG and SVG of the same image:<\/p>\n\n\n\n From a distance, the PNG and SVG image looks the same however when zoomed in, the PNG lines become pixelated while the SVG graphic remains sharp.<\/p>\n\n\n\n When comparing file size between the two images, the SVG file is less in size. But why does file size matter? Smaller file sizes create a better user experience. A webpage with a small file size will load faster. It also means that those with limited connectivity and are using mobile data will have less data to download. As well as this, it also improves the overall performance of the webpages.<\/p>\n\n\n\n Key benefits of SVGs:<\/span><\/strong><\/p>\n\n\n\n <\/p>\n\n\n\n Here are a few ways SVGs can be created:<\/p>\n\n\n\n 1. Manually writing SVG code<\/strong> \u2013 Its discussed in the \u2018What are the various ways SVGs can be added onto webpages\u2019 section under Inline SVGs.<\/p>\n\n\n\n 2. Design tools <\/strong>\u2013 such as Adobe Illustrator, Figma and infinity.<\/p>\n\n\n\n Here\u2019s a tutorial using Figma as the design tool<\/span><\/p>\n\n\n\n 2.1. Create your shape \u2013 Here is a smiley face created in Figma using 3 cirlcles and a line.<\/p>\n\n\n 2.2. Group your wireframe. If your SVG has many shapes and layers, this ensures that the SVG is exported as a single image.<\/p>\n\n\n\n 2.3. Remove the background (optional). If you don\u2019t want your image to have a background, go selection colors. A Figma wireframe automatically comes with a white background so for the white colour (FFFFFF) change it from 100% to 0% and that should remove your background.<\/p>\n\n\n\n 2.4. Once you are happy with your desired line or shape, go to the Export<\/strong> tab and click the +<\/strong>. Mine is set to PNG as default but we want to select SVG. Then click the Export button below, which will save your work as a SVG file.<\/p>\n\n\n 2.5. When the file is opened, it should automatically display in the default web browser, allowing the SVG image to be viewed.<\/p>\n\n\n\n 3.<\/strong> Converting graphics to SVG<\/strong> – You can also convert PNGs or JPEGs to SVG using online converter tools. However, it’s not the best practice because complex raster images may not always convert cleanly.<\/p>\n\n\n\n Here’s an example of an image that was converted from JPEG to SVG.<\/p>\n\n\n\n In HTML, SVG lines, shapes and colours can be created using code, where the position and the size of the shape is defined using x and y axis coordinates. Here are the basic shape elements that can be created:<\/p>\n\n\n\n 1.<\/strong> An <line> element creates a straight line between two points. X1 and y1 is the starting point of the line, while x2 and y2 defines the ending point of the line. The stroke is the line colour; here it\u2019s been set to green. And the stroke-width is the like thickness which I\u2019ve set to 4.<\/p>\n\n\n\n 2.<\/strong> The <rect> element creates a rectangle. The x = horizontal position (left to right) and the y = vertical position (top to bottom). The x and y positions determines where the rectangle starts on the page. The fill attribute determines the rectangles colour, here its been set to red.<\/p>\n\n\n\n 3. <\/strong>The <circle> element creates a circle. The cx = centre point x axis and the cy = centre point y axis, while the r = radius. The radius determines how big the circle is. A larger radius value creates a bigger circle, and a smaller radius creates smaller circle.<\/p>\n\n\n\n 4.<\/strong> The <ellipse> element creates an oval shape. What makes the ellipse different to a circle is the rx = horizonal radius and ry = vertical radius which will stretch the circle out. In the example, the rx is larger than ry, therefore shape will stretch horizontally.<\/p>\n\n\n\n 5.<\/strong> The <polyline> element creates any shape made of connected straight. The points for polylines and polygons are represented in coordinate pairs. The pairs are written like this: x1, y1 x2,y2 x3,y3 x4,y4. The x value represents horizontal position, and the y value represents vertical position. In the example, there\u2019s 4 pairings which makes 4 connected straight lines.<\/p>\n\n\n\n 6. <\/strong>The <polygon> element is similar to <polyline>. The key difference is the polygon element automatically closes the shape, connecting the last point back to the first.<\/p>\n\n\n\n 7. <\/strong>The <path> element is most versatile. Although SVG provides seven basic shape elements, the <path> element can create almost any vector shape, which makes it foundational to most SVG graphics used on websites.<\/p>\n\n\n\n <\/p>\n\n\n\n In this case, the SVG is used as an image source file, just like any other image on a webpage. It is important to also include a descriptive alt attribute so that those who are visually impaired can interpret the image through screen readers.<\/p>\n\n\n\n In this method, the SVG is being applied though CSS instead of placing it in the HTML. In the example, the background image has been added to the body CSS. The min-height is made to fit the screen size, and the background-image loads the SVG onto the webpage. Background-size is put as cover to cover the webpage and background-repeat is to make sure the SVG is not duplicated many times across the page.<\/p>\n\n\n This is best for reusing SVGs multiple times across the webpage without having to rewrite the full SVG code. The SVG is defined once inside the <symbol> element and each symbol is given its own unique ID. To be able to reuse the SVG, you would use the <use> element. Its especially good for styling all the SVGs you\u2019ve reused, at once.<\/p>\n\n\n\n <\/p>\n\n\n\n With CSS, it can animate properties such as colours, positions, scales and rotation.<\/p>\n\n\n\n In the example below, the circle changes colour once the user hovers over it. The transition property tells the browser the way it should animate once the user hovers over it, the 0.5 ease gives it a slight delay into a smooth transition to a different colour. The MyCircle hover element is calling for the orange circle to turn purple when the user hovers over it.<\/p>\n\n\n The <svg> element creates a 150\u00d7150 canvas, while the <circle> element draws a circle positioned in the centre using cx and cy. The CSS applies a keyframe animation that changes the circle\u2019s radius from 40 to 60 pixels, causing the circle to expand and shrink repeatedly to create a pulsing effect.<\/p>\n\n\n Why should we optimise our SVGs? Optimising SVGs improves the website performance and loading times which is from removing unnecessary things in the SVG.<\/p>\n\n\n\n 1. SVG optimisation tools <\/strong>\u2013 SVGOMG. A optimisation tool like SVGOMG removes spaces, comments, layers and metadata which is not needed. By doing this, the SVG file size will be reduced.<\/p>\n\n\n 2. Code-level optimisation<\/strong> \u2013 If you are manually coding your SVG image, removing line breaks, indentations and extra spaces will also help reduce the file size.<\/p>\n\n\n\n 3. Simplify paths<\/strong> \u2013 if using a design tool to create your SVG from scratch, try reducing the amount of anchor points on your image and removing unnecessary layers. Extensive amount of anchor points and layers will make the file size bigger.<\/p>\n\n\n <\/p>\n\n\n\n What are SVG\u2019s and why are they useful? SVG stands for Scalable Vector Graphics. It\u2019s a type of graphic format widely used in web design. SVG was developed by World Wide Web Consortium \u2013 W3C between 1998 and1999. It was then created as an open-standard XML based vector image and was officially released in September […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-318","post","type-post","status-publish","format-standard","hentry","category-article"],"_links":{"self":[{"href":"https:\/\/megandarkodesigns.uk\/blog\/wp-json\/wp\/v2\/posts\/318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/megandarkodesigns.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/megandarkodesigns.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/megandarkodesigns.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/megandarkodesigns.uk\/blog\/wp-json\/wp\/v2\/comments?post=318"}],"version-history":[{"count":3,"href":"https:\/\/megandarkodesigns.uk\/blog\/wp-json\/wp\/v2\/posts\/318\/revisions"}],"predecessor-version":[{"id":372,"href":"https:\/\/megandarkodesigns.uk\/blog\/wp-json\/wp\/v2\/posts\/318\/revisions\/372"}],"wp:attachment":[{"href":"https:\/\/megandarkodesigns.uk\/blog\/wp-json\/wp\/v2\/media?parent=318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/megandarkodesigns.uk\/blog\/wp-json\/wp\/v2\/categories?post=318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/megandarkodesigns.uk\/blog\/wp-json\/wp\/v2\/tags?post=318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/megandarkodesigns.uk\/blog\/wp-content\/uploads\/2026\/03\/image-8.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/megandarkodesigns.uk\/blog\/wp-content\/uploads\/2026\/03\/image-9-1024x756.png\")
<\/figure>\n\n\n\n\n
How to Create SVGs<\/strong><\/h5>\n\n\n\n
![\"\"](\"https:\/\/megandarkodesigns.uk\/blog\/wp-content\/uploads\/2026\/03\/image-10.png\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/megandarkodesigns.uk\/blog\/wp-content\/uploads\/2026\/03\/image-12.png\")
<\/figure>\n<\/div>\n\n\n\n![\"\"](\"https:\/\/megandarkodesigns.uk\/blog\/wp-content\/uploads\/2026\/03\/Screenshot-2026-03-09-164303.png\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\n![\"\"](\"https:\/\/megandarkodesigns.uk\/blog\/wp-content\/uploads\/2026\/03\/Screenshot-2026-03-09-164545.png\")
<\/figure>\n<\/div>\n\n\n\n![\"\"](\"https:\/\/megandarkodesigns.uk\/blog\/wp-content\/uploads\/2026\/03\/Screenshot-2026-03-09-164614.png\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\n![\"\"](\"https:\/\/megandarkodesigns.uk\/blog\/wp-content\/uploads\/2026\/03\/image-15.png\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/megandarkodesigns.uk\/blog\/wp-content\/uploads\/2026\/03\/rainbow-clean.jpg\")
<\/figure>\n<\/div>\n\n\n\n![\"\"](\"https:\/\/megandarkodesigns.uk\/blog\/wp-content\/uploads\/2026\/03\/Screenshot-2026-03-09-165749.png\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\nVarious Ways SVGs Are Added to Webpages<\/strong><\/h5>\n\n\n\n
Inline SVG <\/strong><\/h6>\n\n\n\n
Img tag<\/h6>\n\n\n\n
![\"\"](\"https:\/\/megandarkodesigns.uk\/blog\/wp-content\/uploads\/2026\/03\/Screenshot-2026-03-09-171314.png\")
<\/figure>\n\n\n\nCSS Background image<\/h6>\n\n\n\n
![\"\"](\"https:\/\/megandarkodesigns.uk\/blog\/wp-content\/uploads\/2026\/03\/image-17.png\")
<\/figure>\n<\/div>\n\n\nSVG Sprites<\/h6>\n\n\n\n
Creating CSS Animated SVGs<\/strong><\/h5>\n\n\n\n
Hover Animation<\/strong><\/h6>\n\n\n\n
![\"\"](\"https:\/\/megandarkodesigns.uk\/blog\/wp-content\/uploads\/2026\/03\/image-19.png\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/megandarkodesigns.uk\/blog\/wp-content\/uploads\/2026\/03\/Screenshot-2026-03-09-171101-edited.png\")
<\/figure>\n<\/div>\n\n\n\n![\"\"](\"https:\/\/megandarkodesigns.uk\/blog\/wp-content\/uploads\/2026\/03\/Screenshot-2026-03-06-155535-edited-1.png\")
<\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\nBouncing Animation<\/strong><\/h6>\n\n\n\n
![\"\"](\"https:\/\/megandarkodesigns.uk\/blog\/wp-content\/uploads\/2026\/03\/image-18.png\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/megandarkodesigns.uk\/blog\/wp-content\/uploads\/2026\/03\/Screenshot-2026-03-09-171604.png\")
<\/figure>\n<\/div>\n\n\n\n![\"\"](\"https:\/\/megandarkodesigns.uk\/blog\/wp-content\/uploads\/2026\/03\/Screenshot-2026-03-09-171627.png\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\nHow can they be optimised?<\/strong><\/h5>\n\n\n\n
![\"\"](\"https:\/\/megandarkodesigns.uk\/blog\/wp-content\/uploads\/2026\/03\/image-1.png\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/megandarkodesigns.uk\/blog\/wp-content\/uploads\/2026\/03\/image.png\")
<\/figure>\n<\/div>\n\n\nReferences<\/h5>\n\n\n\n
\n