Рисование svg html. Масштабируемая векторная графика в HTML5

Векторная графика широко применима в печатной продукции. Что касается веб-сайта, то здесь мы также можем использовать векторную графику посредством SVG или Scalable Vector Graphics (масштабируемая векторная графика). В официальной спецификации W3.org описывается следующим образом:

Язык для описания двумерной графики посредством XML. SVG позволяет нам использовать три типа графических объектов: векторные графические фигуры (например, пути, состоящие из прямых и кривых линий), изображений и текст.

Технология была доступна аж с 1999 года, и 16 августа 2011 года вошла в список рекомендаций W3C. Тем не менее, SVG до сих пор не так часто используется, несмотря на множество преимуществ в использовании векторной графики вместо растровой.

Преимущества масштабируемой векторной графики

С точки зрения использования графики на страницах веб-сайта, масштабируемая векторная графика предлагает нам несколько преимуществ над растровой графикой, которые включают в себя:

Независимость от разрешения

Растровая графика (или Bitmap) зависит от разрешения, так как она создана при помощи пикселей. Если такой графический элемент увеличить в размере, то сразу станут видны большие квадратики. С векторной же графикой такого не происходит, потому что она не зависит от разрешения, а вместо этого построена на математических вычислениях, что позволяет нам увеличить ее до любых размеров и не терять в качестве.

Сокращение HTTP-запросов

Масштабируемая векторная графика можете быть встроена напрямую в HTML-документ при помощи тега svg, так что браузеру не нужно будет дополнительный запрос для графики. Это также положительно сказывается на производительности веб-сайта.

Стилизация и скриптинг

Прямая интеграция при помощи тега svg также позволит нам стилизовать графику при помощи CSS. Мы можем изменять такие параметры объекта как цвет фона, непрозрачность, границы и так далее, таким же образом, как это происходит в HTML. Мы также можем управлять графикой посредством javascript.

Возможность анимации и редактирования

SVG-объект может быть анимирован при использовании анимационного элемента или посредством JS-библиотеки вроде jQuery. SVG-объект также может быть отредактирован посредством любого текстового редактора или графического ПО вроде (бесплатен) или .

Меньший размер файла

SVG имеет меньший размер файлов в сравнении с растровой графикой.

Рисуем простые фигуры, используя SVG

Следуя спецификации, мы можем рисовать вроде многоугольников, окружностей, линий или эллипсов посредством SVG и, для того, чтобы браузер генерировал масштабируемую векторную графику, все эти графические элементы должны быть помещены в теги «svg». Давайте рассмотрим на примерах, представленных ниже:

Линия

Для того чтобы нарисовать линию при помощи SVG, мы можем использовать элемент «line». Этот элемент используется для рисования одной прямой линии, поэтому он будет состоять всего из двух точек: начальной и завершающей.

Как вы можете видеть выше, координата начальной точки линии указана в первых двух атрибутах х1 и х2, а координата завершающей точки указана атрибутами y1 и y2.

Здесь также есть два других атрибута: stroke и stroke-width, которые отвечают за цвет и ширину границы. С другой стороны, мы также можем определить эти атрибуты в строчном стиле, следующим образом:

Style="stroke-width:1; stroke:rgb(0,0,0);"
и это даст нам тот же результат.

*

Ломаная линия

Здесь все очень сходится с «line», но посредством элемента «polyline» мы можем нарисовать несколько линий, вместо одной. Вот пример:

Элемент «polyline» имеет атрибуты точек, которые содержат все координаты линий.

*

Прямоугольник

Нарисовать прямоугольник мы можем так же просто, только при помощи элемента «rect». Нам только лишь нужно будет указать ширину и высоту:

*

Окружность

Мы также можем нарисовать окружность посредством элемента «circle». В этом примере мы нарисуем окружность с радиусом 100, который определяется атрибутом r:

Первые два атрибута, cx и cy, определяют центральную координату окружности. В вышеприведенном примере мы выставили 102 как для координаты x, так и для y. Если эти атрибуты не будут заданы, то по умолчанию они будут составлять 0.

*

Эллипс

Мы можем нарисовать эллипсы посредством элемента «ellipse». Здесь все работает примерно так же, как и с кругом, но на этот раз мы можем управлять отдельно радиусом линии х и радиусом линии y посредством атрибутов rx и ry.

*

Многоугольник

С помощью элемента «polygon» мы можем рисовать многоугольники, фигуры с несколькими углами и сторонами вроде треугольника, восьмиугольника. Пример:

*

Применение редактора векторной графики

Как видно, рисовать простые фигуры при помощи SVG в HTML довольно просто. Тем не менее, если нам нужен более сложный объект, то этот метод нам уже не подойдет.

К счастью, как мы уже указали выше, мы можем использовать редактор векторной графики вроде Adobe Illustrator или Inkscape для того, чтобы проделать эту работу. Если вы знакомы с этим ПО, то вы без труда сможете рисовать объекты при помощи удобного интерфейса, нежели при помощи кода HTML.

Либо вы также можете встроить сам svg-файл при помощи одного из следующих элементов: embed, iframe, object.

Результат будет схожим.

В данном примере мы использовали с .

*

Браузерная поддержка масштабируемой векторной графики

Что касается поддержки в браузерах, то масштабируемая векторная графика уже сейчас отлично поддерживается во за исключением IE8 и более ранних версий. Но это можно исправить при помощи javascript-библиотеки под названием . Чтобы облегчить задачу, мы воспользуемся инструментом , чтобы конвертировать наш SVG-код в формат, поддерживаемый Raphael.

Для начала, скачайте и включите библиотеку Raphael.js в ваш HTML-код. Затем, загрузите svg-файл на сайт, скопируйте и вставьте сгенерированный код в следующую функцию load:

Window.onload=function() {
//the Raphael code goes here
}
Внутри тега body вставьте следующий div с id атрибутом rsr.

И на этом мы закончили! Посмотрите пример, приведенный по ссылке ниже.

В завершение

Итак, это и есть основы SVG. Мы надеемся, что теперь вы немного понимаете этот предмет. Это один из лучших способов оптимизировать производительность ваших страниц, и при этом предоставить графику, способную отчетливо отображаться даже на экранах Retina.

Как обычно, если вы любознательны, то мы подготовили для вас небольшую подборку дополнительных статей.

* (Введение в SVG)
* (SVG: не будем зависеть от разрешения)
* (Почему бы не использовать SVG?)

Спасибо за чтение, и надеемся, что данная статья окажется полезной вам!

Внимание! У вас нет прав для просмотра скрытого текста.

Для включения изображения в определенном месте страницы существует тег . Этот тег имеет обязательный параметр: SRC="", и несколько необязательных. Параметр SRC="" указывает браузеру адрес, где искать рисунок и в качестве значения должен иметь URL-адрес ресурса, где размещен графический файл. В простейшем случае этот файл будет размещен в корневом каталоге или в папке IMG Вашего сайта. Необязательные параметры:

Параметр ALT="" в качестве значения содержит надпись, рассказывающую о содержании изображения для тех посетителей, браузеры которых не поддерживают графику или работают в режиме отключенной графики. Эта же надпись появляется при наведении указателя мышки на изображение.

Параметры WIDTH="" HEIGHT="" в качестве значений имеют размеры изображения по ширине и высоте в пикселях. Эти параметры желательно указывать в коде страницы, чтобы браузер заранее оставлял место для изображения, тогда, при загрузке, страница будет меньше "дергаться". Кроме того, эти параметры можно употреблять для регулирования размеров рисунка в окне браузера.

Параметр BORDER="" прорисовывает рамку вокруг изображения. В качестве значения указывается цифра, указывающая ширину рамки в пикселях.

Параметр ALIGN= определяет положение изображения на странице, и может принимать значения TOP - выравнивает верхнюю границу изображения по самому высокому элементу текущей строки, TEXTTOP - выравнивает верхнюю границу изображения по самому высокому текстовому элементу текущей строки, MIDDLE - выравнивает середину изображения по базовой линии текущей строки, ABSMIDDLE - выравнивает середину изображения посередине текущей строки. BASELINE или BOTTOM - выравнивает нижнюю границу изображения по базовой линии текущей строки, ABSBOTTOM - выравнивает нижнюю границу изображения по нижней границе текущей строки, HSPACE= - определяет отступ по горизонтали, VSPACE= - определяет отступ по вертикали.

Синтаксис тэга:

Бегущая строка

Бегущая строка задается тегом .

Атрибутами этого тэга являются bgcolor - цвет фона бегущей строки, height - высота строки, width - ширина строки.

Direction - задает направление движения бегущей строки - direction="left" (right, up, down) - движение влево (вправо, вверх, вниз).

Behavior - поведение строки - behavior="scroll" (slide, alternate). Scroll - обычная прокрутка (можно не прописывать, оно так и есть по умолчанию)

Slide - прокрутка с остановкой, строка пробегает до края и останавливается. Если одновременно с behavor="slide" употребить параметр loop, то строка прокрутится установленное количество раз и остановится у края. Alternate - строка будет двигаться от края к краю.
Scrollamount - скорость движения строки, scrollamount="1". Может принимать значения от 1 до 10. 1 - самое медленное движение, 10 - самое быстрое.

Синтаксис тега: текст

Современные веб-браузеры могут воспроизводить видео и звуковые файлы различных форматов. Для этого они используют встроенные проигрыватели (plug-in, элементы управления ActiveX) или внешние программы проигрыватели. Вставить звук или видео в HTML-документ можно с помощью различныз тегов:

- для вставки фонового звука;

- для вставки видео в формате AVI;

- для вставки звуковых и видеофайлов;

- для вставки звуковых и видеофайлов.

При решении вставить звук и/или видео в HTML-документ следует учитывать, что соответствующие файлы имеют довольно большой объем. Наиболее популярными в веб сейчас являются файлы звуковых форматов MP3, WMA, AIFF, AU, RealAudio (c расширением ra и ram), MP4, MIDI и видеоформатов MPEG, MOV. Звуковой формат WAV и видеоформат AVI в Интернете используются довольно редко.

SVG (Scalable Vector Graphics – масштабируемая векторная графика) – стандарт векторной графики , разработанный консорциумом W3C.

SVG – это язык разметки для описания двухмерных графических приложений и изображений, входящий в подмножество расширяемого языка разметки XML. Сюда относится также ряд связанных графических скриптов.

SVG поддерживается всеми современными браузерами для ПК и мобильных телефонов. Некоторые функции, такие как SMIL анимации и SVG Fonts распространены не так широко.

Последней версией полной спецификации является SVG 1.1.

SVG 2 находится в стадии разработки. В нее будут добавлены новые, простые в использовании функции для SVG, а также идут работы по более тесной интеграции с HTML, CSS и DOM.

Достоинства SVG

• Графика в формате SVG создается с использованием математических формул, которые при изменении размера изображения можно скорректировать. Таким образом векторные изображения масштабируются лучше, чем растровые.
• Размер векторной картинки обычно меньше, чем у сравнимых по качеству изображений в форматах JPEG, GIF или PNG.
• SVG графика имеет текстовый формат, который можно и править в блокноте, и рисовать в графических векторных редакторах Adobe Illustrator, CorelDRAW.
• Cкрипты и анимация в SVG позволяют создавать динамичную и интерактивную графику.
• Текст в графике SVG является текстом, а не изображением, поэтому он индексируется поисковыми системами.
• В SVG изображение можно добавить несколько ссылок.
• К SVG формату можно подключать внешние таблицы стилей CSS, глобальные стили внутри контейнера или добавлять внутренние стили с помощью атрибута style в тегах фигур и путей.

Вставка SVG на Web-страницу

SVG-изображение можно вставить на Web-страницу несколькими способами. Первый из них – это простая вставка SVG-кода на страницу (при большой картинке HTML-код страницы станет огромным и трудно читаемым). При других способах сначала надо сохранить SVG-код в файле с расширением .svg .

Итак, способы вставки SVG-изображения на Web-страницу:

• прямая вставка кода в HTML-документ в контейнере ;
• использование SVG-файла в качестве фонового изображения;
• подключение SVG-файла в HTML-документ с помощью тегов img , embed , object и iframe ;
• подключение SVG-файла в PHP-документ с помощью функции include .

1. Прямая вставка SVG-кода в Web-документ

2. Использование SVG-файла в качестве фонового изображения

3. Подключение SVG-файла с помощью тега img

4. Подключение SVG-файла с помощью тега embed

5. Подключение SVG-файла с помощью тега object

6. Подключение SVG-файла с помощью тега iframe

7. Подключение SVG-файла с помощью функции include

Система координат

Размеры и координаты можно задавать в различных единицах (px, pt, pc, cm, mm, em, in). Если единицы измерения не указаны, то это пиксели.

Начало отсчета координат – это верхний левый угол экрана, т.е.

Базовые SVG-элементы

Пример stroke-dasharray Чередование штрихов и пробелов в пунктирной линии Пример stroke-dashoffset Сдвиг пунктира Пример fill Цвет заливки (none – без заливки) fill-opacity Прозрачность заливки (от 0 до 1) fill-rule Правило заливки.
Возможные значения атрибута: style Стиль элемента class Класс элемента

Прямая линия

Задается тегом .

Атрибуты тега

Пример

РЕЗУЛЬТАТ:

Ломаная линия

Задается тегом .

Атрибут тега

Пример

РЕЗУЛЬТАТ:

Многоугольник

Задается тегом . Всегда выводит замкнутые фигуры, автоматически проводя линию из конца последнего отрезка в начало первого.

Атрибут тега

Пример

РЕЗУЛЬТАТ:

Прямоугольник

Задается тегом .

Атрибуты тега

Пример

РЕЗУЛЬТАТ:

Круг

Задается тегом .

Атрибуты тега

Пример

РЕЗУЛЬТАТ:

Сложная траектория

Задается тегом . Является самым универсальным из SVG-элементов. Позволяет создавать произвольные фигуры. Форма фигуры задается атрибутов d , значение которого – это набор специальных команд. Эти команды могут быть и в верхнем, и в нижнем регистре. Верхний регистр указывает на то, что применяется абсолютное позиционирование, а нижний – относительное.

Команды, определяющие траекторию и направление фигурной линии

M, m	Начальная точка Mx,y
L, l	Отрезок прямой Lx,y
H, h	Горизонтальная линия Hx,y или hx
V, v	Вертикальная линия Vx,y или vy
A, a	Дуга эллипса Arx,ry x-axis-rotation large-arc-flag,sweep-flag x,y rx,ry – радиусы дуги эллипса; x-axis-rotation – угол поворота дуги относительно оси X; large-arc-flag – если (=1), то строится большая части дуги, если (=0) – меньшая; sweep-flag – если (=1), то дуга строится по часовой стрелке, если (=0) – против часовой стрелке; x,y – координаты конечной точки дуги.
C, c	Кубическая кривая Безье Cx1,y1 x2,y2 x,y x1,y1 – координаты первой контрольной точки; x2,y2 x,y
S, s	Гладкая кубическая кривая Безье Sx2,y2 x,y x2,y2 – координаты второй контрольной точки; x,y Первая контрольная точка является зеркальным отражением второй контрольной точки.
Q, q	Квадратичная кривая Безье Qx1,y1 x,y x1,y1 – координаты контрольной точки; x,y – координаты конечной точки кривой.
T, t	Гладкая квадратичная кривая Безье Qx1,y1 x,y x,y – координаты конечной точки кривой. Контрольная точка этой команды является зеркальным отражением контрольной точки предыдущей команды.
Z, z	Замыкание траектории

Пример

РЕЗУЛЬТАТ:

.

Такой вывод следует из доклада председателя правления «Башнефти» , озвученного общему собранию акционеров компании, копия которого поступила в распоряжение редакции .

Из документа следует, что в результате геологоразведочных работ, в 2018 году была открыта 81 продуктивная залежь с запасами 19 миллионов тонн.

При этом применение высокоэффективных геолого-технических мероприятий и внедрение современных технологий повышения нефтеотдачи позволили сохранить по итогам 11 месяцев добычу нефти на зрелых месторождениях в Башкирии на уровне 2017 года - 15 миллионов тонн. Всего объем добычи за указанный период составил 17,3 миллиона тонн нефти.

В докладе также отмечается, что создание единой производственной цепочки с добывающим и перерабатывающим комплексом «Роснефти» повысило эффективность работы Уфимских НПЗ и привело к снижению операционных и логистических затрат. В частности, освоен выпуск бензина «Евро-6» и начато промышленное производство дорожного битума по новому ГОСТу.

Объем розничной реализации на АЗС «Башнефти» за 11 месяцев 2018 года увеличился по сравнению с аналогичным периодом прошлого года на 13,2 процентов и достиг 1,7 миллиона тонн.

Для реализации стратегии в области нефтехимии ведется модернизация нефтехимического производства. Так, в мае 2018 года на «Уфаоргсинтезе» введена в эксплуатацию новая установка производства кумола - сырья для изготовления красок, растворителей, различных полимеров, используемых в автомобильной промышленности, медицине и фармакологии. На очереди - реконструкция комплекса производства ароматики на «Уфанефтехиме», строительство новых установок по производству олефинов на «Уфаоргсинтезе».

Консолидированный показатель операционной прибыли за 9 месяцев 2018 года вырос по сравнению с аналогичным периодом 2017 года на 22,6 процента и составил 135,5 миллиарда рублей. Чистая прибыль «Башнефти» достигла 74,6 миллиарда рублей, что на 73,5 процента превышает аналогичный показатель прошлого года.

В течение третьего квартала «Башнефть» выплатила акционерам объявленные на годовом собрании в июне 2018 года дивиденды в размере 28,2 миллиарда рублей, а совокупный объем выплаченных с начала года дивидендов составил 43 миллиарда рублей.

При этом уровень чистого долга компании снизился и по состоянию на 30 сентября 2018 года составил 40,1 миллиарда рублей (на аналогичную дату 2017 года данный показатель составлял 104,7 миллиарда рублей).

При этом за отчетный период налоговые отчисления в бюджет Башкортостана с учетом разового платежа по налогу на прибыль увеличились по сравнению с аналогичным периодом прошлого года в 1,5 раза и составили 50,5 миллиарда рублей.

HTML-изображения добавляются на веб-страницы с помощью тега . Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа.

С помощью HTML-тегов

Вставка изображений в HTML-документ

1. Тег

Элемент представляет изображение и его резервный контент, который добавляется с помощью атрибута alt . Так как элемент является строчным, то рекомендуется располагать его внутри блочного элемента, например,

Или