From e5591fcaf6014c912a2e7edeb9ecb858cf6d4c0e Mon Sep 17 00:00:00 2001 From: Domenick Mitchell <69612428+Domanator13@users.noreply.github.com> Date: Fri, 8 Oct 2021 00:19:23 -0400 Subject: [PATCH] Create svgs.md --- lessons/misc-quick-reference/svgs.md | 209 +++++++++++++++++++++++++++ 1 file changed, 209 insertions(+) create mode 100644 lessons/misc-quick-reference/svgs.md diff --git a/lessons/misc-quick-reference/svgs.md b/lessons/misc-quick-reference/svgs.md new file mode 100644 index 00000000..5cd1d2ca --- /dev/null +++ b/lessons/misc-quick-reference/svgs.md @@ -0,0 +1,209 @@ +--- +title: SVGs +--- + +SVGs are, Scalable Vector Graphics, they use an XML based code/text to describe +how the image itself looks. This guide will cover everything you need to know +about an SVG. + +# Why use SVG? + +Some of the benefits of an SVG are that they are scalable, meaning you can +change the height and width of the image and it will not lose quality like a +raster image. + +SVGs physically **cannot** pixelate, this is because they are made using vectors +instead of pixels as in a traditional image. + +SVG are code based unlike traditional raster images, meaning there load time is +a lot faster in browsers. + +
+ +
+Here is an example of an SVG + +```svg + + + + + + +``` + +
+ +
+ +While this may look scary and a bit daunting its _actually_ not that complicated +and you will **not** be coding SVGs so you don't have to worry about looking at +the code all that much. There are some important takeaways from this though that +we will go over. + +A question you may be asking is what exactly does this code make, I thought we +were talking about an image file type? + + + +This is what that code for the SVG above actually translates to it's the logo +for [React](https://handbook.suncoast.io/lessons/react-intro). + +## Parts of an SVG + +
+ +**svg Tag**: + +`` + +This tag here is the skeleton of your file it defines the size and that your +file is an SVG. Now lets go over the different parts of this tag because it has +a lot going on. + +
+ +`xmlns="http://www.w3.org/2000/svg"` + +This part of the svg tag means XML namespace, this is what defines your file as +an SVG based on XML standards. The link there is to w3 schools and this is what +tells the file that the svg tag an all of it's children elements follow the +standards provided in the XML specification. + +
+ +`viewBox="0 0 841.9 595.3"` + +This is what determines the base size of your SVG file and where it is +positioned within the blank canvas that an image has. The 4 values in a viewbox +are, min-x, min-y, width and height. + +- The `min-x` value determines where on the X or horizontal axis your image will + be placed. +- The `min-y` value determines where on the Y or vertical axis your image will + be placed. +- The `width` value determines exactly how wide your image will be. +- The `height` value determines determines exactly how tall your image will be. +
+
+ +**g Tag**: + +`` + +This tag here is a grouping tag it lets you know that all of its children, items +enclosed in the tag, are grouped together. + +
+ +`fill="#61DAFB"` + +This part of the g tag lets you know that all of its children are colored the +same color and this is the blueish color seen above +and here. + +
+
+ +**path Tag**: + +` +
+ +**circle Tag**: + +`` + +This tag is also very **important** to pay attention to, it defines a circular +shape as the name would suggest. Please note, this is a self closing tag. + +
+ +`cx="420.9"` + +This part of the circle tag states where on your canvas the X or horizontal axis +coordinate center of the circle will be. + +
+ +`cy="296.5"` + +This part of the circle tag states where on your canvas the Y or vertical axis +coordinate center of the circle will be. + +
+ +`r="45.7"` + +This part of the circle tag determines the radius of the circle. + +
+
+ +**Note**: + +This is by no means all of the tags an svg file can contain, these are just some +common tags. If your curious or would like to learn about some of the other tags +[check this out](https://developer.mozilla.org/en-US/docs/Web/SVG/Element). + +
+
+ +## Creating & Using SVGs + +If you would like to create your own SVG files to use or if you find a really +cool image and just want to convert it to an SVG, this section is for you. + +
+ +**SVG Collection Websites**: + +- [Flaticon](https://www.flaticon.com/) - Free SVG icons, these must be + attributed to their respective authors. +- [Bootstrap Icons](https://icons.getbootstrap.com/) - A collection of icons + that are free and available to use, these do not have to be attributed. +- [Google Icons](https://fonts.google.com/icons) - Another collection of icons +that are free and available to use created by Google these are all simple icons +that are one color. +
+ +**Conversion Tools**: + +- https://www.autotracer.org/ +- https://www.pngtosvg.com/ +- https://convertio.co/jpg-svg/ +
+ +**Software Tools**: + +- [Adobe Illustrator](https://www.adobe.com/products/illustrator.html?sdid=KKQML&mv=search&ef_id=CjwKCAjwtfqKBhBoEiwAZuesiCnijQcHzTdZImqiVPTZfaS_m63UZIBuh6EBXQvFZkGe-ln-xa6hIxoC6joQAvD_BwE:G:s&s_kwcid=AL!3085!3!442365417815!e!!g!!adobe%20illustrator!1711729586!70905759510&gclid=CjwKCAjwtfqKBhBoEiwAZuesiCnijQcHzTdZImqiVPTZfaS_m63UZIBuh6EBXQvFZkGe-ln-xa6hIxoC6joQAvD_BwE) - + Probably the best software for SVGs, but it's a paid software. +- [Inkscape](https://inkscape.org/) - An alternative to Ai, this is a free open +source software. +
+ +**VS Code Extensions**: + +- [SVG Preview](https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview) - + This is one of my personal favorite extensions for SVGs, it does exactly what + the name would suggest. +- [SVG](https://marketplace.visualstudio.com/items?itemName=jock.svg) - This + extension provides syntax highlighting and quick access to the MDN reference + docs for quick and easy learning, you can also minimize your svg code/file + size using this extension.