The Web is about more than text and information, itis also a medium for expressing artistic creativity, data visualization, andoptimizing the presentation of information for different audiences withdifferent needs and expectations. The use of graphics on Web sites enhances theexperience for users, and W3C has several different and complementarytechnologies that work together with HTML and scripting to provide the creators of Web pages and Web Applications with the tools they need todeliver the best possible representation of their content. Learn more belowabout:
This intro text is boilerplate for the beta releaseof w3.org. Our intent is to invite the community to develop this template andhelp provide useful content and links. For a more complete example, see thepage for HTML & CSS.
What are Graphics?
Web graphics are visual representations used on a Web site to enhance orenable the representation of an idea or feeling, in order to reach the Web siteuser. Graphics may entertain, educate, or emotionally impact the user, and arecrucial to strength of branding, clarity of illustration, and ease of use forinterfaces.
Examples of graphics include maps, photographs, designs and patterns, familytrees, diagrams, architectural or engineering blueprints, bar charts and piecharts, typography, schematics, line art, flowcharts, and many other imageforms.
Graphic designers have many tools and technologies at their disposal foreverything from print to Web development, and W3C provides many of theunderlying formats that can be used for the creation of content on the open Webplatform.
What are Graphics Used For?
Graphics are used for everything from enhancing the appearance of Web pagesto serving as the presentation and user interaction layer for full-fledged WebApplications.
Different use cases for graphics demand different solutions, thus there areseveral different technologies available. Photographs are best represented withPNG, while interactive line art, data visualization, and even user interfacesneed the power of SVG and the Canvas API. CSS exists to enhance other formatslike HTML or SVG. WebCGM meets the needs for technical illustration anddocumentation in many industries.
What is PNG?
Portable Network Graphics (PNG) is a static fileformat for the lossless, portable, well-compressed storage and exchange ofraster images (bitmaps). It features rich color control, with indexed-color,grayscale, and truecolor support and alpha-channel transparency. PNG isdesigned for the Web, with streaming and progressive rendering capabilities. Itis supported ubiquitously in Web browsers, graphical authoring tools, imagetoolkits, and other parts of the creative tool chain. PNG files have the fileextension ".PNG" or ".png" and should be deployed using the Media Type"image/png". PNG images may be used with HTML, CSS, SVG, the Canvas API, andWebCGM.
What is SVG?
Sure, graphics are important but what makes a game remembered and long-lasting is its Art Direction and this year saw several fantastic examples of this. But which was the best? #SGOTY21 Vte now: https://t.co/2DLsZbWLU2 https://t.co/ziYRdCxkGB— Source Gaming (@SteamPoweredDM) Dec 20, 2021
Scalable Vector Graphics (SVG) is likeHTML for graphics. It is a markup language for describing all aspects of animage or Web application, from the geometry of shapes, to the styling of textand shapes, to animation, to multimedia presentations including video andaudio. It is fully interactive, and includes a scriptable DOM as well asdeclarative animation (via the SMIL specification). It supports a wide range ofvisual features such as gradients, opacity, filters, clipping, and masking.
The use of SVG allows fully scalable, smooth, reusable graphics, from simplegraphics to enhance HTML pages, to fully interactive chart and datavisualization, to games, to standalone high-quality static images. SVG isnatively supported by most modern browsers (with plugins to allow its use onall browsers), and is widely available on mobile devices and set-top boxes. Allmajor vector graphics drawing tools import and export SVG, and they can also begenerated through client-side or server-side scripting languages.
What is CSS?
Cascading Style Sheets (CSS) is the languagefor describing the presentation of Web pages, including colors, layout, andfont information. It may be used to enhance the graphical aspects of HTML andSVG. You can read more on the page for HTML & CSS.
What is the Canvas API?
The Canvas API is a client-side scripting technology to allow for the richcreation or alteration of raster images (bitmaps) . It uses vector-basedprogrammatic methods to create shapes, gradients, and other graphical effects,and because it has no DOM, it can perform very quickly. Dedicated scripters candevelop games or even full-featured applications using the Canvas API, alone orintegrated into HTML or SVG. It is supported natively in most modern browsers(with script libraries extending support to all major browsers), and even onsome mobile devices.
What is WebCGM?
Web Computer Graphics Metafile (WebCGM)is the Web profile of CGM, the ISO standard for vector and compositevector/raster picture definition. CGM has a significant following in technicalillustration, interactive electronic documentation, geophysical datavisualization, amongst other application areas and is widely used in the fieldsof automotive engineering, aeronautics, and the defense industry. WebCGM hasmany of the same graphical features as SVG.
As a simple example of an SVG image file, here is a circle with a gradientto give it a 3D appearance:
For more information about using open Web graphics, see W3C's graphicstutorials.