What tag is used to integrate graphics? Scalable vector graphics in HTML5

Basic Concepts and Usage

The Scalable Vector Graphics (SVG) format is part of a family of vector graphics standards. Vector graphics differ from raster graphics, in which the color definition of each pixel is stored in some data array. The most common raster formats used on the Internet today are JPEG, GIF, and PNG, each of which has its own advantages and disadvantages.

Commonly used abbreviations
  • CSS: Cascading Style Sheets
  • GIF: Graphics Interchange Format
  • GUI: Graphical User Interface
  • HTML: Hypertext Markup Language
  • JPEG: Joint Photographic Experts Group
  • PNG: Portable Network Graphics
  • SVG: Scalable Vector Graphics
  • XML: Extensible Markup Language

The SVG format has several advantages over any raster format:

  • SVG graphics are created using mathematical formulas that require much less data to be stored in the original file because there is no need to store data for each individual pixel.
  • Vector images scale better. Attempting to scale images published online beyond their original size may result in distorted (or pixelated) images.

    This is because the original pixel data was designed for a specific image size. When resizing, the image renderer makes a guess as to what data should be used to fill the new pixels. Vector images are more resistant to scaling; When changing the image size, the corresponding mathematical formulas can be adjusted.

  • The source file size of vector graphics is typically smaller, so SVG graphics load faster than their raster counterparts and are less data-intensive.
  • SVG images are rendered by the browser and can be output software. They can change dynamically, making them particularly suitable for data-driven applications such as charts.
  • The original SVG image file is provided in text form, so it is accessible and search engine friendly.

In this article, you'll learn about the benefits of SVG formats and how they can help you build HTML5 websites.

SVG Basics

Creating SVG graphics uses a completely different process than creating JPEG, GIF, or PNG files. JPEG, GIF and PNG files are usually created using some kind of image editing program, such as Adobe Photoshop. SVG images are typically created using some kind of XML-based language. There are graphical user interfaces for editing SVG graphics that will generate the XML code behind the image for you. However, this article assumes that you are working directly with XML. Information about SVG image editing programs can be found in the section.

Listing 1 shows an example of a simple SVG XML file that draws a red circle with a 2-pixel black border.

Listing 1. SVG XML file

The above code produces the image shown in Figure 1.

Figure 1. Red circle with 2 pixel black border

Creating Basic Geometric Shapes

When working with SVG graphics, XML tags are used to create geometric shapes; these XML elements are shown in Table 1.

Table 1. XML elements for creating SVG graphics

line element

The line element is the simplest graphic element. Listing 2 shows how to create a horizontal line.

Listing 2. Creating a horizontal line

The code shown in Listing 2 produces the image shown in Figure 2.

Figure 2. Simple horizontal line

The SVG root tag has width and height attributes that define the drawable area. These attributes act in the same way as the height and width attributes of other HTML elements. In this case, it is determined that the work area occupies all available space.

Additionally, this example uses the style tag. SVG graphics support applying styles to content using a wide variety of methods. Styles in this article are included to make images easy to see or when certain attributes, such as color and line width, are required to render a drawing. Additional information about applying styles in SVG graphics can be found in the section.

You can create a line definition by specifying the start and end coordinates in the X and Y axes relative to the workspace. The x1 and y1 attributes represent the start coordinates, and the x2 and y2 attributes represent the end coordinates of the line. To change the direction of drawing a line, you simply need to change the coordinates. For example, by modifying the previous example, you can create a diagonal line as shown in Listing 3.

Listing 3. Creating a diagonal line

Figure 3 shows the output of the code shown in Listing 3.

Figure 3. Diagonal line

polyline element

A broken line is a drawing made up of several lines. Listing 4 shows an example of creating a drawing that looks like the steps of a staircase.

The code shown in Listing 4 produces the image shown in Figure 4.

A polyline is created using the points attribute and by defining pairs of X and Y coordinates separated by commas. In the example shown, the first point is defined as 0.40, where 0 is the X coordinate and 40 is the Y coordinate. However, one set of points is not enough to display the image on the screen, since this set only tells the SVG renderer the starting position. You need at least two sets of points: a starting point and an ending point (for example, points="0.40 40.40").

As with drawing simple lines, the lines do not have to be strictly horizontal or vertical. If you change the values ​​from the previous example, you can get irregular shapes made of lines, like in Listing 5.

Listing 5. Creating a jagged line

The code in Listing 5 produces the image shown in Figure 5.

Figure 5. Jagged line

rect element

To create a rectangle, you just need to define its width and height, as shown in Listing 6.

Listing 6. Creating a rectangle

The code in Listing 6 produces the image shown in Figure 6.

Figure 6. Rectangle

The rect tag can also be used to create a square; a square is simply a rectangle with the same height and width.

circle element

The circle is created by defining the X and Y coordinates of the circle's center and radius, as shown in Listing 7.

Listing 7. Creating a circle

The code in Listing 7 produces the image shown in Figure 7.

Figure 7. Circle

The cx and cy attributes determine the position of the circle's center relative to the canvas. Since the radius is half the width of the circle, when determining it, keep in mind that the total width of the image will be twice the value you specify.

Ellipse element

Essentially, an ellipse is a circle with two radii specified in the code, as shown in Listing 8.

Listing 8. Creating an ellipse

The code in Listing 8 produces the image shown in Figure 8.

Figure 8. Ellipse

In this case, the attributes cx and cy also define the coordinates of the center relative to the canvas. However, with an ellipse, you define one radius for the X-axis and a second radius for the Y-axis using the rx and ry attributes.

polygon element

A polygon is a geometric figure that contains at least three sides. Listing 9 creates a simple triangle.

Listing 9. Creating a triangle

The code in Listing 9 produces the image shown in Figure 9.

Figure 9. Triangle

Similar to working with the polyline element, polygons are created by defining pairs of X and Y coordinates using the points attribute.

By adding pairs of coordinates along the X and Y axes, you can create polygons with any number of sides. For example, by modifying the code in the previous example, you can create a four-sided polygon, as shown in Listing 10.

Listing 10. Creating a four-sided polygon

The code shown in Listing 10 produces the image shown in Figure 10.

Figure 10. Four-sided polygon

Using the polygon tag, you can also create geometric shapes of complex shapes. Listing 11 creates a star drawing.

Listing 11. Creating a star

The code shown in Listing 11 produces the image shown in Figure 11.

Figure 11. Star polygon

path element

The path element is the most complex of all drawing elements, allowing you to create arbitrary drawings using a set of special commands. The path element supports the commands listed in Table 2.

Table 2. Commands supported by the path element

These commands can be used in either upper or lower case. If the command is specified in uppercase, absolute positioning is applied. If a lowercase command is used, relative positioning is applied. Providing examples of the use of all commands is beyond the scope of this article. However, below are a few examples that demonstrate the basics of using these commands.

Using the path element, you can create any simple geometric shapes from the previous examples in this article. Listing 12 uses the path element to create a regular triangle.

Listing 12. Creating a triangle using the path element

The code shown in Listing 12 produces the image shown in Figure 12.

Figure 12. Triangle created using the path element

The list of commands is defined using the d attribute. IN in this example Drawing begins at the point with coordinates X 150 and Y 0, defined by the move to point command (M150 0). Then use the command to draw a line to the point (L75 200). a line is drawn to a point with coordinates X = 75 and Y = 200. After this, another line is drawn using another command to draw a line to a point (L225 200). Finally, the pattern is closed using the snap (Z) command. No coordinates accompany the Z command, since to close a path, by definition, you draw a line from the current position back to the starting point of the drawing (in this case, the point with coordinates X = 150, Y = 0).

The purpose of the example given was to show you the concept; If you just need to create a regular triangle, it's better to use the polygon tag.

The true power of the path element is its ability to create custom shapes, as shown in Listing 13. This example is taken from the World Wide Web Consortium (W3C) document. Scalable Vector Graphics (SVG) 1.1 (2nd edition)(see section).

Listing 13. Creating a custom shape using the path element

The code shown in Listing 13 produces the image shown in Figure 13.

Figure 13. Custom shape created using the path element

The path element can be used to create complex designs such as diagrams and squiggly lines. Note that the example provided uses multiple path elements. When creating drawings, you are not limited to any one drawing element in the SVG root tag.

Filters and Gradients

In addition to basic CSS styles, which were used in many of the examples above, SVG graphics also support the use of filters and gradients. In this section, you'll learn how to apply filters and gradients to SVG images.

Filters

Filters can be used to apply special effects to SVG images. SVG supports the following filters.

  • feBlend
  • feColorMatrix
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight
  • fePointLight
  • feSpotLight

Listing 14 creates a drop shadow effect that is applied to a rectangle.

Listing 14. Creating a drop shadow effect for a rectangle

The code shown in Listing 14 produces the image shown in Figure 14.

Figure 14. Drop shadow effect for a rectangle

Filters are defined inside the def element (short for “definition”). The filter in this example is assigned an identifier (id) "f1". The filter tag itself has attributes to define the X and Y coordinates, as well as the width and height of the filter. Inside the filter tag, you use the required filter elements and set their properties to the desired values.

Once a filter is defined, you associate it with a specific drawing by using the filter attribute, as shown in .

Set the url value to the id attribute value assigned to the filter.

Gradients Gradient

represents a gradual transition from one color to another. There are two main types of gradients: linear and radial. The type of gradient applied is determined by the element you use. The following examples show how to apply linear and radial gradients to an ellipse.

Listing 15 creates an ellipse with a linear gradient.

Listing 15. Creating an ellipse with a linear gradient

The code shown in Listing 15 produces the image shown in Figure 15.

Figure 15. Ellipse with linear gradient

Listing 16 creates an ellipse with a radial gradient.

Listing 16. Creating an ellipse with a radial gradient

The code shown in Listing 16 produces the image shown in Figure 16.

Gradients, like filters, are defined within the def element. Each gradient is assigned an identifier (id). Gradient attributes (such as colors) are set inside the gradient tag using stop elements. To apply a gradient to a picture, set the url value of the fill attribute to the identifier (id) of the desired gradient.

Text and SVG

In addition to creating basic geometric shapes, SVG can also be used to generate text, as shown in Listing 17.

Listing 17. Creating text using SVG
I love you SVG

The code shown in Listing 17 produces the image shown in Figure 17.

Figure 17. Text created with SVG

This example creates an I love SVG sentence using the text element. When using the text element, the actual text displayed is between the opening and closing text elements.

You can display text along different axes and even along paths. In Listing 18, the text is displayed in an arc-shaped path.

Listing 18. Creating text along an arc-shaped path
I love SVG I love SVG

The code shown in Listing 18 produces the image shown in Figure 18.

Figure 18. Text placed along an arc-shaped path

This example adds an additional XML namespace, xlink , to the SVG root tag. The path used to arc the text is created inside the def element, so the path itself is not rendered in the drawing. The display text is nested inside a textPath element, which uses the xlink namespace to refer to the id of the desired path.

As with other SVG graphics, you can also apply filters and gradients to text. Listing 19 applies a filter and gradient to the text.

Listing 19. Creating text with filter and gradient
I love SVG I love SVG

The code shown in Listing 19 produces the image shown in Figure 19.

Figure 19. Text with filter and gradient

Adding SVG XML Code to Web Pages

Once the SVG XML is created, it can be included in HTML pages in several ways. The first method is to directly insert the SVG XML code into the HTML document, as shown in Listing 20.

Listing 20. Directly inserting SVG XML into an HTML document
Embedded SVG

This method is probably the simplest, but it does not encourage reuse. Remember that SVG XML can be saved as a file with the .svg extension. When you save an SVG graphic as a .svg file, you can use embed, object, and iframe elements to include it in Web pages. Listing 21 shows the code for embedding an SVG XML file using the embed element.

Listing 21. Including an SVG XML file using the embed element

Listing 22 shows the code for including an SVG XML file using the object element.

Listing 22. Including an SVG XML file using the object element

Listing 23 shows the code for including an SVG XML file using an iframe element.

Listing 23. Including an SVG XML file using an iframe element

With one of these methods, you can include the same SVG graphic on multiple pages and update it by editing the original .svg file.

Conclusion

This article covers the basics of creating graphics using the SVG format. You learned how to use the built-in geometry elements to create basic geometric shapes, such as a line, rectangle, circle, and so on. You also learned how to use the path element to create complex designs by issuing a sequence of commands, such as moving to a point. , drawing a line to a point and drawing an arc to a point. This article also teaches you how to apply filters and gradients to SVG graphics, including graphics with text, and how to include SVG graphics in HTML pages.

There is a tag to include an image at a specific location on the page. . This tag has a required parameter: SRC="", and several optional ones. The SRC="" parameter tells the browser where to look for the graphic and should have the URL of the resource where the graphic file is located as its value. In the simplest case, this file will be placed in the root directory or IMG folder of your site. Optional parameters:

The ALT="" parameter contains an inscription as a value that tells about the content of the image for those visitors whose browsers do not support graphics or work in graphics disabled mode. The same inscription appears when you hover your mouse over the image.

The WIDTH="" HEIGHT="" parameters have the image dimensions in width and height in pixels as values. It is advisable to specify these parameters in the page code so that the browser leaves space for the image in advance, then, when loading, the page will “twitch” less. In addition, these parameters can be used to adjust the size of the picture in the browser window.

The BORDER="" parameter draws a border around the image. The value is a number indicating the width of the frame in pixels.

The ALIGN= parameter determines the position of the image on the page, and can take the values ​​TOP - aligns the top border of the image to the highest element of the current line, TEXTTOP - aligns the top border of the image to the highest text element of the current line, MIDDLE - aligns the middle of the image to the base line of the current line , ABSMIDDLE - aligns the middle of the image to the middle of the current line. BASELINE or BOTTOM - aligns the bottom border of the image to the base line of the current line, ABSBOTTOM - aligns the bottom border of the image to the bottom border of the current line, HSPACE= - determines the horizontal indent, VSPACE= - determines the vertical indent.

Tag syntax:

Ticker

The running line is specified by the tag .

The attributes of this tag are bgcolor - background color of the running line, height - line height, width - line width.

Direction - sets the direction of movement of the creeping line - direction="left" (right, up, down) - movement to the left (right, up, down).

Behavior - behavior of the line - behavior="scroll" (slide, alternate). Scroll - normal scrolling (you don’t have to specify it, it’s the default)



Slide - scrolling with a stop, the line runs to the edge and stops. If you use the loop parameter simultaneously with behavor="slide", the line will scroll the set number of times and stop at the edge. Alternate - the line will move from edge to edge.
Scrollamount - line movement speed, scrollamount="1". Can take values ​​from 1 to 10. 1 is the slowest movement, 10 is the fastest.

Tag syntax: text

Modern web browsers can play video and sound files various formats. To do this, they use built-in players (plug-in, ActiveX controls) or external player programs. You can insert sound or video into an HTML document using various tags:

- to insert background sound;

- to insert video in AVI format;

- for inserting audio and video files;

- for inserting audio and video files.

When deciding to insert audio and/or video into an HTML document, keep in mind that the corresponding files are quite large. The most popular files on the Internet now are MP3, WMA, AIFF, AU, RealAudio (with ra and ram extensions), MP4, MIDI audio files and MPEG, MOV video formats. The WAV audio format and the AVI video format are rarely used on the Internet.

(Review article following the conference on software development in Yekaterinburg and other presentations. Video version of the report in Yekaterinburgsee at techdays.ru )

What are HTML5 Canvas and SVG?

HTML5 Canvas

– the element represents a canvas for rendering raster graphics. In fact, it is an empty block of given dimensions that you can draw on using special APIs for JavaScript.

The API includes 45 special methods and 21 attributes used to display graphics primitives, set styles, transforms, access individual pixels, and project images and videos.

Myself element is defined directly in the HTML5 specification. The API for it is described in a separate document - HTML Canvas 2D Context.

SVG

Music Can Be Fun

Beautiful musical and graphic visualization game (http://musiccanbefun.edankwan.com/).

Examples of diagrams in SVG

Diagram of the human skeleton, periodic system of chemical elements and respiratory system (http://ie.microsoft.com/testdrive/Graphics/RealWorldDataAndDiagrams/Default.xhtml).

Yandex Maps

A closer example from real life– when drawing routes, SVG is used (if the browser supports it). See also the talk “Maps and SVG” from our HTML5 Camp.

More examples:

  • Beauty of the Web http://www.beautyoftheweb.com/ – real sites from the real world
  • Dev: unplugged http://contest.beautyoftheweb.com/ – projects participating in the HTML5 application competition

Difference between Canvas and SVG

In various scenarios, either Canvas or SVG may be better suited for dynamic graphics rendering - we will return to this issue at the end. For now, let's look at the key differences between one and the other:

Canvas SVG
Format Raster Vector
Scaling
Access

Individual Pixel Access (RGBA)

Accessing individual elements (DOM)
Indexability and Accessibility

Only the final raster is visible (you cannot select shapes, text, etc.) - bad for Accessibility

You can view the structure (for example, pull out all the text)
Stylization

Visual styles are set when rendering via the API

Visual styles are set by attributes, you can include CSS
Programming

JS API for working with primitives

DOM for working with elements
Update

To update - drawing over or completely redrawing

It is possible to change individual elements
Events

No easy way to handle mouse events. Objects under the cursor must be defined manually.

Mouse events are easily dispatched via the DOM and processed automatically.
Code integration

JS code separate from Canvas

You can include JS inside

These differences must be taken into account when using one or another technology for data visualization. For example, drawing a graph of a function may be easier with Canvas, while displaying tooltips (identifying the object under the mouse pointer) is easier with SVG.

In practice, however, there are already a number of ready-made libraries for data visualization that partially neutralize these differences.

I will not go into the basics of working with each of the technologies; as an introductory one, I recommend the report by Vadim Makeev (Opera) from the HTML5 Camp “Dynamic Graphics: Canvas and SVG”.

See also MIX 2011 reports:

Processing Images with Canvas

One of the notable features of Canvas is that this technology provides pixel-by-pixel access to the data displayed and allows you to project various graphic elements, including video, onto the canvas.

A good example of where this is needed is an image processing/analysis task.

Processing.js offers two approaches to describing visualization: intermediate code, which is further parsed by the library itself (in a separate file or inside a page) and explicit JavaScript code.

For example, to draw a Mandelbrot set fractal, you can use both the option indicated on the page with the corresponding example and the following JavaScript code:

var xmin = -2.5; var ymin = -2; var wh = 4; function sketchProc(processing) ( processing.setup = function () ( processing.size(200, 200); processing.noLoop(); ); processing.draw = function () ( processing.loadPixels(); var maxiterations = 200; var xmax = xmin + wh; var ymax = ymin + wh; var dx = (xmax - xmin) / (processing.width); (var j = 0; j< processing.height; j++) { var x = xmin; for (var i = 0; i < processing.width; i++) { var a = x; var b = y; var n = 0; while (n < maxiterations) { var aa = a * a; var bb = b * b; var twoab = 2.0 * a * b; a = aa - bb + x; b = twoab + y; if (aa + bb >16.0) ( break ; ) n++;

) if (n == maxiterations) processing.pixels.setPixel(i+j*processing.width, 0);

else processing.pixels.setPixel(i+j*processing.width, processing.color(n*16 % 255));

x += dx;

) y += dy; ) processing.updatePixels();); ) var canvas = document.getElementById("myCanvas" ); var p = new Processing(canvas, sketchProc);

You can try it yourself here: http://silverbook.ru/projects/html5datavisualization/demo3-processingjs.htm (copy the code, paste it into the console and execute).

JavaScript InfoVis Toolkit (JIT)

To display the data, JIT takes the raw values ​​as JSON:

var json = ( "label" : ["label A" , "label B" , "label C" , "label D" ], "values" : [ ( "label" : "date A" , "values" : ) , ( "label" : "date B" , "values" : ), ( "label" : "date E" , "values" : ), ( "label" : "date F" , "values" : ), ( "label" : "date D" , "values" : ), ( "label" : "date C" , "values" : )] );

var pieChart = new $jit.PieChart(( injectInto: "infovis" , animate: true , offset: 30, sliceOffset: 0, labelOffset: 20, type: "stacked:gradient" , showLabels:true , resizeLabels: 7, Label: ( type: "Native" , size: 20, family: "Arial" , color: "white" ), Tips: ( enable: true , onShow: function (tip, elem) ( tip.innerHTML = "

" + elem.name + "

: " + elem.value; ) ) ));

just call the rendering:

PieChart.loadJSON(json);< data.length; i++) { var item = data[i]; var region = document.getElementById(item.id); region.style.fill = RGBtoHex(item.value, 0, 0); }

jQuery Sparklines

As I already said, both Canvas and SVG are suitable for solving the traditional problem of visualizing numerical data in the form of graphs and charts. In both cases, this can be done quite easily using the appropriate libraries.

We have already looked at examples with Canvas, let's now look at several libraries for working with SVG. (This is also not an exhaustive list, but quite high-quality and popular solutions.)

Raphael

To add a simple pie chart, all you need is the following code:

var r = Raphael("chart" , 640, 480); var pie = r.g.piechart(320, 240, 100, );

With a few additional steps you can add a legend, chart captions, and interactive tooltips:

var r = Raphael("chart" , 640, 480); r.g.txtattr.font = "12px "Fontin Sans", Fontin-Sans, sans-serif"; r.g.text(320, 100, "Interactive Pie Chart" ).attr(("font-size" : 20)); var pie = r.g.piechart(320, 240, 100, ,
(legend: ["%%.%% – Enterprise Users" , "IE Users" ], legendpos: "west" ,
href: ["http://raphaeljs.com" , http://g.raphaeljs.com]});
pie.hover(function () ( this .sector.stop(); this .sector.scale(1.1, 1.1, this .cx, this .cy); if (this .label) ( this .label.stop(); this .label.scale(1.5); this .label.attr(("font-weight" : 800) ) ), function () ( this .sector.animate((scale: ), 500, "bounce" ) ; if (this .label) ( this .label.animate((scale: 1), 500, "bounce" ); this .label.attr(("font-weight" : 400)); ) ));

Other types of charts can be produced in a similar way using appropriate methods. See examples directly on the extension site http://g.raphaeljs.com/

Highcharts JS

The library API makes it quite easy to generate a chart using data in JSON:

var chart1 = new Highcharts.Chart(( chart: ( renderTo: "charts" , defaultSeriesType: "bar" ), title: ( text: "Fruit Consumption" ), xAxis: ( categories: ["Apples" , "Bananas" , "Oranges" ]), yAxis: ( title: ( text: "Fruit eaten" ) ), series: [( name: "Jane" , data: ), ( name: "John" , data: )] ));

With a slightly more complex script, you can specify additional details, for example, display a legend, configure tooltips:

var chart = new Highcharts.Chart(( chart: ( renderTo: "charts" , defaultSeriesType: "area" , spacingBottom: 30 ), title: ( text: "Fruit consumption *" ), subtitle: ( text: "* Jane\"s banana consumption is unknown", floating: true , align: "right" , verticalAlign: "bottom" , y: 15 ), legend: ( layout: "vertical" , align: "left" , verticalAlign: "top" , x: 150, y: 100 , floating: true , borderWidth: 1, backgroundColor: "#FFFFFF" ), xAxis: ( categories: ["Apples" , "Pears" , "Oranges" , "Bananas" , "Grapes" , "Plums" , "Strawberries" , "Raspberries" ] ), yAxis: ( title: ( text: "Y-Axis" ), labels: ( formatter: function () ( return this .value; ) ) ), tooltip: ( formatter: function () ( return " "+this.series.name+"
" + this .x +": " + this .y; ) ), plotOptions: ( area: ( fillOpacity: 0.5 ) ), series: [( name: "John" , data: ), ( name: "Jane" , data: )] ));

If necessary, you can replace the default styles with your own.

Should you choose Canvas or SVG?

As can be seen from the examples above, both technologies are often suitable for data visualization tasks. Many things are done in a similar way. In cases where pixel-by-pixel output is needed, Canvas is obviously better suited. Where the diagram breaks down into individual objects in which you need to maintain interactivity, SVG is better suited.

Canvas is better
  • Editing raster graphics
  • Adding effects to graphics/video
  • Generation of raster graphics (data visualization, fractals, function graphs)
  • Image Analysis
  • Game graphics (sprites, background, etc.)
SVG is better
  • Scalable Interfaces
  • Interactive Interfaces
  • Diagrams, diagrams
  • Vector image editing

In graphical form this can be represented as follows:

Finally, another important aspect that is also important to consider when choosing a technology is rendering performance when using Canvas and SVG:

In practice, Canvas works better with small drawing area sizes and on a large number of objects; SVG is better suited when scaling or displaying is required. big screen and on not too many objects displayed at a time.

Most Web pages contain graphics. It allows you to present information colorfully and clearly. In many cases, it is better to show a picture than to give a long text description.
There are two ways to place graphics on a page:

  • insertion of individual pictures;
  • filling the background with a picture.

In any case, the graphic image is taken from the file.

Inserting a graphic image from a graphic format file onto a page is done using the tag (from English, image - image) indicating the file address as an argument to the SRC attribute:

Address graphic file- This is either a URL or a file name, possibly with a path. For example, to display the graphic file logotip.jpg, you should write the tag

To increase the transfer speed of a graphic image in a tag you can use the attribute ( additional parameter) LOWSRC, which takes the address of a graphics file as an argument. You can create two graphic files: one (for example, let's say logotip.jpg) contains a high-resolution image, and the other (for example, logotip.gif) contains a low-resolution image. Then tag

Instructs the browser to first download the logotip.gif file, and then replace it with the logotip.jpg file as it is received.
Another way to speed up graphics loading is to specify the dimensions of the rectangular area in which the graphic will be placed using the WIDTH and HEIGHT attributes, measured in pixels.

If you specify these attributes, the browser will first allocate space for the graphics, prepare the document layout, display the text, and only then load the graphics. Note that the browser compresses or stretches the image to fit within the specified frame size. An example of specifying image dimensions: Graphics are usually used in conjunction with text, so the challenge of aligning text and graphics arises. This problem is solved using the attribute ALIGN tag using various arguments. For example, we might want text to flow around a picture to the right or left. Usually the picture is embedded closely with the text, which can be ugly. To avoid this, you can set empty margins around the illustration. Fields are created using attributes VSPACE for top and bottom margins and НSPACE
.
for side margins in the tag

. Note that the browser compresses or stretches the image to fit within the specified frame size. An example of specifying image dimensions: The arguments to these attributes are specified as numbers that specify the size of the fields in pixels. To cancel text wrapping around graphics, use the tag The following tag sets the graphics from the logotip.jpg file to wrap to the right (the image will be to the left of the text)::

If you want to place an image to the right of the text, then you need the attribute

assign argument
Let's consider an example of the combined use of graphics and texts. Open Notepad (text editor Notepad) Windows. Write HTML code in it using the tags discussed above. Below is a program that outputs some text and graphics. You can use any of the files you have as a graphic file. The file used here is logotip.gif.


Exercise 1



<Н1>Text wraps around graphics on the right
This is an example of using text and graphics together.
The HTML program text can be written in any text editor. This uses text markup tags.

This text is displayed from a new paragraph. To do this, we used a special tag.


Try resizing your browser window. Notice how the text layout changes.

Rice. 657. Text wraps around the picture on the right

Wide possibilities for precise positioning of images (as well as other elements) on the page provide tables And styles. These HTML elements will be discussed later. For example, you can define a table without visible frames, and place pictures, texts and other elements in the cells of this table.

mob_info