Use SVG for flexible, extensible and fun backgrounds. Part one
I decided to make a free-razdolbaysky translation of an SVG article with ALA. This is a translation of the first part , in the near future I will try to translate the second.
Scalable vector graphics (SVG) consists of circles, rectangles, and paths represented in XML and combined into images on web pages. You can apply solid fills, gradients, and some SVG filters — not all browsers support all filter types. You can include text, images, and you can copy your SVG as much as you like. Most often, SVG is used in graphics programs to create diagrams, illustrations, animations. However, nothing prevents us from using SVG for website design — this gives us surprisingly versatile web-design features to use. In this introductory article, I will look at some important points in working with SVG, including browser support. In the second part, we will look at how to find and adapt SVGs that you can find on the Web, or how to create SVG images yourself and add them to your page.
Some people use SVG for website design, usually for topic icons. For example, Sam Ruby, co-chair of the HTML5 working group, uses SVG in his blog posts . Opera's Erik Dahlstrom does the same thing as Codedread’s Jeff Schiller.
')
Jeff uses SVG not only for icons, but also embeds the menu and his entire site uses vector graphics. The Emacs for Mac OS X website is mainly used by SVG, to see the scaling of the SVG in action, resize the page.
I (i.e., the author of the article - lane) used SVG to get the gradient color from the photo currently displayed (reload the page a couple of times to see the effect) as a fancy background element for the general theme of my sites .
You can use SVG wherever you use GIF, JPEG or PNG. Using SVG, you provide drawing instructions , not raster.
Being vector graphics, SVG can scale to fit into the page size, while JPEG or GIF cannot do it at all, or at least cannot do it cleanly. This scalability can be especially useful when the user views the page on a small device like the iPhone and on a large 32-inch monitor. The screenshots below show the EMACS for OS X website open browser in full screen and shrunk vertically. Please note that the image is reduced so that it fits into the browser window without disturbing the proportions. No matter how big the page is, the image is scaled correctly.
Screenshot of EMACS website for Mac OS X
Same site, but in a smaller browser window
SVG also does not heavily load the channel. No matter how many graphics are transferred to the client, because it is described using XML. SVG can be useful when you need to fill the page background with graphics without duplicate elements.
No matter how good a SVG is, there are times when you should not use it. For example, you can convert photos to SVG, but the conversion will not be accurate. In addition, client resources may not be enough to render such an image. I converted sophisticated jpeg to SVG for testing. As a result, not only the first Chrome beta was hung, but also a computer, during SVG processing.
So, SVG can not replace photos or complex images, but for the rest is fine. Before we smear our hands in the second part of this article, it is important for us to learn about support for SVG in browsers.
The main browsers — Firefox, Chrome, Safari, and Opera — support SVG either as a file loaded into an object or embedded directly into XHTML code. Jeff Schiller, mentioned earlier, maintains a graph showing SVG support in various browsers.
As shown in the graph, most major browsers support basic SVG capabilities. This includes support for fonts, images, graphic elements such as circles or paths, gradients and some filters. Only more exotic features are not supported.
However, the lack of more advanced features should not affect the use of SCV in website design, since I do not recommend using complex SVG images for the background of the page, because the browser will spend a lot of time rendering them.
It is worth thinking twice before using the animated background, because People are annoyed by the page's stirring, especially that which they cannot get rid of by disabling javascript.
As mentioned earlier, most major browsers support basic SVG capabilities. As always, the significant exception is Internet Explorer.
I approve of using SVG, but as mentioned, one of the main browsers does not support SVG, and this browser is Internet Explorer. Fortunately for us, the lack of support for SVG in IE is no longer an obstacle for us.
Libraries such as VGWeb , Ample SDK , and Raphael implement SVG support in current and previous versions of IE. In addition, the HTML5 specification involves embedding SVG into HTML , whereas before that it was only supported in XHTML. This has expanded the support of doctypes, and the recent news of Microsoft joining the W3C SVG working group gives hope that IE will start supporting SVG in the ninth version anyway.
In the meantime, the number of mobile devices on the web is increasing, and none of the popular devices is dependent on IE. In addition, the growing popularity of minimalistic design can be used to effectively introduce SVG into your sites. If the site has an attractive but minimalistic design, the SVG can be added as an entertaining innovation, and it doesn't matter whether it is displayed or not. The previously mentioned sites that use SVG, in the absence of support from the browser either provide alternative graphics, or offer the reader to use a browser that supports SVG. (And do not beat the authors for the last option - this approach has been working for IE in browser wars for more than 10 years already).
SVG provides the ability to use short and long text alternatives to images. Because it is based on markup language, you can easily add title and description using title and desc elements, as shown below.
Unfortunately, these screen reader support is not enough, which creates a problem for sites where accessibility is mandatory.
Since SVG screen reader support is poor, you can use server-side processing or XSLT to access information in the embedded SVG page and generate HTML from the
You can read more about accessibility and SVG at the following links:
Scalable vector graphics (SVG) consists of circles, rectangles, and paths represented in XML and combined into images on web pages. You can apply solid fills, gradients, and some SVG filters — not all browsers support all filter types. You can include text, images, and you can copy your SVG as much as you like. Most often, SVG is used in graphics programs to create diagrams, illustrations, animations. However, nothing prevents us from using SVG for website design — this gives us surprisingly versatile web-design features to use. In this introductory article, I will look at some important points in working with SVG, including browser support. In the second part, we will look at how to find and adapt SVGs that you can find on the Web, or how to create SVG images yourself and add them to your page.
Wild SVG
Some people use SVG for website design, usually for topic icons. For example, Sam Ruby, co-chair of the HTML5 working group, uses SVG in his blog posts . Opera's Erik Dahlstrom does the same thing as Codedread’s Jeff Schiller.
')
Jeff uses SVG not only for icons, but also embeds the menu and his entire site uses vector graphics. The Emacs for Mac OS X website is mainly used by SVG, to see the scaling of the SVG in action, resize the page.
I (i.e., the author of the article - lane) used SVG to get the gradient color from the photo currently displayed (reload the page a couple of times to see the effect) as a fancy background element for the general theme of my sites .
When can and when can not use SVG
You can use SVG wherever you use GIF, JPEG or PNG. Using SVG, you provide drawing instructions , not raster.
Being vector graphics, SVG can scale to fit into the page size, while JPEG or GIF cannot do it at all, or at least cannot do it cleanly. This scalability can be especially useful when the user views the page on a small device like the iPhone and on a large 32-inch monitor. The screenshots below show the EMACS for OS X website open browser in full screen and shrunk vertically. Please note that the image is reduced so that it fits into the browser window without disturbing the proportions. No matter how big the page is, the image is scaled correctly.
Screenshot of EMACS website for Mac OS X
Same site, but in a smaller browser window
SVG also does not heavily load the channel. No matter how many graphics are transferred to the client, because it is described using XML. SVG can be useful when you need to fill the page background with graphics without duplicate elements.
No matter how good a SVG is, there are times when you should not use it. For example, you can convert photos to SVG, but the conversion will not be accurate. In addition, client resources may not be enough to render such an image. I converted sophisticated jpeg to SVG for testing. As a result, not only the first Chrome beta was hung, but also a computer, during SVG processing.
So, SVG can not replace photos or complex images, but for the rest is fine. Before we smear our hands in the second part of this article, it is important for us to learn about support for SVG in browsers.
Browser Support
The main browsers — Firefox, Chrome, Safari, and Opera — support SVG either as a file loaded into an object or embedded directly into XHTML code. Jeff Schiller, mentioned earlier, maintains a graph showing SVG support in various browsers.
As shown in the graph, most major browsers support basic SVG capabilities. This includes support for fonts, images, graphic elements such as circles or paths, gradients and some filters. Only more exotic features are not supported.
However, the lack of more advanced features should not affect the use of SCV in website design, since I do not recommend using complex SVG images for the background of the page, because the browser will spend a lot of time rendering them.
It is worth thinking twice before using the animated background, because People are annoyed by the page's stirring, especially that which they cannot get rid of by disabling javascript.
As mentioned earlier, most major browsers support basic SVG capabilities. As always, the significant exception is Internet Explorer.
Internet Explorer and SVG
I approve of using SVG, but as mentioned, one of the main browsers does not support SVG, and this browser is Internet Explorer. Fortunately for us, the lack of support for SVG in IE is no longer an obstacle for us.
Libraries such as VGWeb , Ample SDK , and Raphael implement SVG support in current and previous versions of IE. In addition, the HTML5 specification involves embedding SVG into HTML , whereas before that it was only supported in XHTML. This has expanded the support of doctypes, and the recent news of Microsoft joining the W3C SVG working group gives hope that IE will start supporting SVG in the ninth version anyway.
In the meantime, the number of mobile devices on the web is increasing, and none of the popular devices is dependent on IE. In addition, the growing popularity of minimalistic design can be used to effectively introduce SVG into your sites. If the site has an attractive but minimalistic design, the SVG can be added as an entertaining innovation, and it doesn't matter whether it is displayed or not. The previously mentioned sites that use SVG, in the absence of support from the browser either provide alternative graphics, or offer the reader to use a browser that supports SVG. (And do not beat the authors for the last option - this approach has been working for IE in browser wars for more than 10 years already).
What about accessibility?
SVG provides the ability to use short and long text alternatives to images. Because it is based on markup language, you can easily add title and description using title and desc elements, as shown below.
Unfortunately, these screen reader support is not enough, which creates a problem for sites where accessibility is mandatory.
< svg xmlns:xlink ="http://www.w3.org/1999/xlink" version ="1.0" xmlns ="http://www.w3.org/2000/svg" >
< title > Chimp on a tightrope </ title >
< desc > Older chimp walking across a tightrope between two trees at the St. Louis Zoo </ desc >
< image xlink:href ="chimp.jpg" x ="0" y ="0" height ="402" width ="600" />
</ svg >
* This source code was highlighted with Source Code Highlighter .Title usually used as a document title in standalone SVG. Both title and desc can also be used in more complex markup in other namespaces. In addition, for more complex metadata, there is a metadata element that can contain RDF / XML for things like copyright and author information.
Since SVG screen reader support is poor, you can use server-side processing or XSLT to access information in the embedded SVG page and generate HTML from the
title , desc , and metadata. elements metadata. For backgrounds and images used as design elements, you can remove the title and desc elements as superfluous.
You can read more about accessibility and SVG at the following links:
Source: https://habr.com/ru/post/82649/
All Articles