![]() ![]() Luckily XHTML is a thing of the past, as it was more complex than necessary, but it’s worth knowing in case you still need to work on XHTML pages. Please note that HTML5 and XHTML require a different syntax for inline SVG images. In addition, pretty uniquely, SVG they can be directly included in the HTML page: A page Just like you would do for other pixel-based image formats: ![]() SVG images can be displayed by the browser by including them in a img tag: The current version of SVG is 1.1, and SVG 2.0 is under development. Most of the times you won’t have to edit the SVG code, but you will use tools like Sketch or Figma or any other vector graphics tool to create the image, and export it as SVG. Notice how it’s very easy to read and understand how the image will look like: it’s a simple blue rectangle of 10x10 pixels (the default unit). This means that SVG will look very familiar if you are proficient in HTML, except rather than having tags that are suited for document construction (like p, article, footer, aside) in SVG we have the building blocks of vector images: path, rect, line and so on. SVG are just text, and as such it can be efficiently compressed using GZip. SVG provides some image editing effects, like masking and clipping, applying filters, and more. SVG is easy to animate, which is a very cool topic. Once domain of Icon Fonts like FontAwesome, now designers prefer using SVG images because they are smaller and they allow to have multi-color icons. SVG images can render vector-style images a lot smaller than other formats, and are mainly used on logos and illustrations. SVG images can even contain CSS and JavaScript. Thanks to being defined in XML, SVG images are much more flexible than JPG or PNG images, and** we can use CSS and JavaScript to interact with them**. This ensures SVG images can adapt to different screen sizes and resolutions, even ones that have yet to be invented. How so? Because SVG images are built using XML markup, and the browser prints them by plotting each point and line, rather than filling some space with pre-defined pixels. SVG images, thanks to being vector images, can infinitely scale and not have any issue in image quality degradation. This makes them very different than image format such as PNG, GIF or JPG, which are raster image file formats. ![]() A perfect task for SVG.Īlso, the rapid decline of Flash in the last few years led to a renewed interest in SVG, which is great for a lot of things that Flash did in the past. Some part of the success of SVG is due to the variety of screen displays we must support, at different resolutions and sizes. Today we can use SVG images safely, unless you have a lot of users with IE8 and below, or with older Android devices. 7 years ago, this is now a thing of the past, and we can use SVG images safely. I found this quote from a 2011 book: “at the time of writing, direct embedding of SVG into HTML works only in the very newest browsers”. SVG has been penalized for quite a few years by the poor browser support (most notably IE). Interacting with a SVG with CSS or JavaScriptĭespite being standardized in the early 2000s, SVG (a shorthand for Scalable Vector Graphics) is a hot topic these days.This tutorial gives you an overview of SVG by explaining all you need to know in a simple way SVG is an awesome and incredibly powerful image format. ![]()
0 Comments
Leave a Reply. |