--- title: SVG author: Prince Mukhtar published: "2024-08-04" tags: ["sample"] --- # Scalable Vector Graphics A markup language used to describe two-dimensional vector graphics. SVG files are XML(Extensible markup language)-based and can be created and edited with any text editor. THey are widely used for creating graphics that need to be scalable without losing quality, such as icons, logos, diagrams, and interactive graphics on the web. SVG graphics can be manipulated using CSS and JavaScript, making them highly customizable and interactive. THey are supported by all modern web browsers and are essential part of web design and development SVG Sorry, your browser does not support inline SVG. ## What are the pros and cons? ### Pros: - Basic SVG files are often smaller than raster images (raster images are built from lots of colored pixels rather than using mathematical algorithms.) - Doesn’t lose their quality in certain browsers or when resized them to appear in different places. - Files treat text as text and not as deign, screen readers can scan any words continued in AVG images this is usually useful for the people who need help reading webpages. - Search engines can also read and index SVG image text. ### Cons: - Lack of pixels makes displaying high-quality digital photos difficult. JPEG files are generally better for detailed photographs. - Only modern browsers can support SVG images. - It’s a challenge to use SVG files with Internet Explorer 8 and other older browsers. - The code contained in SVG images can be hard to understand if you’re new to its file format. ## How to spot? * Checking the extension code (.svg). * Resizing them if the revolution doesn’t change then it’s a svg file. ### How to open? SVG support a wide verity web browsers like Chrome, Edge, Safari etc. Whether that's on Mac or Windows. Simply launch in your browser and click on the file, it's that easy! ## What it's used for? * Icons * Site Logos * Illustration * Interface Elements * Animations * Data Visualizations * Infographics ## Where to create and edit? * Adobe Illustrator * Canvas SVG Editor * Corel DRAW * Mircosoft Visio * GIMP * Goodle Drawing ## How to create and edit using Adobe Photoshop! * After putting together an image in photoshop, click on file > export > export as. * Click on the format drop-drown menu within the box that appears then select SVG * Sekect export all and save the file. **************************Side Note************************** Since photoshop is a raster graphics editor, many people perfer to create and edit SVG files in Adobe illustrator, and or a vector graphics editor. *************************************************************** ### Code Samples ##### 1. Simple Rectangular Shape: ```html ``` ##### Explanation: - ``: This is the root element of an SVG document. - width and height: These attributes specify the width and height of the SVG canvas. - ``: This is a shape element representing a rectangle. - x, y, width, and height: These attributes define the position and size of the rectangle. - Fill: This attribute sets the fill color of the rectangle. ##### Example: ##### 2. Circle with Gradient Fill: ```html ``` ###### Explanation: - ``: This element defines reusable elements such as gradients or patterns. - ``: This element defines a linear gradient to be used as a fill or stroke. - `id`: This attribute uniquely identifies the gradient. - ``: These elements define color stops within the gradient. - `offset`: This attribute specifies where the color stop is placed along the gradient. - `cx`, `cy`, and `r`: These attributes define the center coordinates and radius of the circle. - `fill`: This attribute sets the fill color of the circle to a gradient defined by the ``. ##### Example: #### 3. Path with Bezier Curve: ```html ``` ##### Explanation: - ``: This element defines a path. - `d`: This attribute specifies the path commands. In this example: - `M`: Move to the starting point. - `Q`: Quadratic Bezier curve command, with control point and end point. - `T`: Smooth Quadratic Bezier curve command, with the end point. - `fill`: This attribute sets the fill color of the path (set to `none` for no fill). - `stroke`: This attribute sets the color of the stroke (outline) of the path. - `stroke-width`: This attribute sets the width of the stroke. ##### Example: