HTML5 SVG может масштабировать векторную графику

SVG может Zoad Vector Graphics (масштабируемая векторная графика) -это графический формат, основанный на масштабируемом языке тегов (XML) для описания двухмерной векторной графики. SVG -это новый двухмерный векторный графический формат, составленное W3C, а также является сетевым векторным графическим стандартом в спецификации. SVG строго следует за синтаксисом XML и описывает содержание изображения в описательном языке текстового формата.

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

SVG используется для определения графики на основе векторов для сетей

SVG использует формат XML для определения графики

Изображения SVG не потеряют качество графика при масштабировании или изменении размера

SVG является стандартом сетевого альянса Wanwei

Стандарты SVG и W3C, такие как DOM и XSL, являются целыми

SVG - это язык, который описывает 2D -графику в XML.

SVG основан на XML, что означает, что каждый элемент в SVG DOM доступен. Вы можете добавить процессор событий JavaScript в определенный элемент.

В SVG каждый рисунок считается объектом. Если атрибут объекта SVG изменяется, браузер может автоматически воспроизводить графику.

Функции:

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

Поддержка процессора событий

Наиболее подходящее приложение с большими областями рендеринга (например, карта Google)

Высокая сложность замедлит рендеринг (применение любого чрезмерного DOM не быстро))

Не подходит для игровых приложений

Canvas рисует 2D -графику через JavaScript.

Холст отображается пикселями.

В холсте, как только график будет нарисована, он не будет продолжать привлекать внимание браузера. Если местоположение изменяется, вся сцена также должна быть повторно, включая любой объект, который мог быть охвачен графикой.

Функции:

Зависимости

Не поддерживайте процессор событий

Слабая способность рендеринга текста

Может сохранить изображение результата в формате .png или .jpg

Самая подходящая игра, интенсивная игра, многие из них будут часто нарисованы

Простой пример:

 <Ширина SVG = 100% высота = 100%> <Circle CX = 300 Cy = 60 r = 50 ход =#ff0-withTh = 3 fill = red /> < /svg>

В прошлом графика, отображаемая в браузере, такую ​​как JPEG, GIF и т. Д., Все это было графикой. В изображении решетки файл изображения определяет значение цвета каждого пикселя в изображении. Браузер должен прочитать эти значения и совершать соответствующие действия. Это изображение обладает сильной способностью воспроизводить, но в некоторых случаях его не будет казаться недостаточным. Например, когда браузер отображается в разных размерах, крайне генерируется край, что в настоящее время генерируется. Кроме того, анимация для растрового изображения ограничена анимацией, которая генерирует тип катящихся книг, то есть быстро и непрерывно отображает отдельные изображения.

Векторная диаграмма указана для определения инструкций, необходимых для каждого значения пикселя вместо самого указанного значения, которое преодолевает часть этих трудностей. Например, Vector Graphics больше не обеспечивает значения пикселей для диаметра в один дюйм, но сообщите браузеру создать диаметр круга на один дюйм, а затем позволить браузеру (или заглушке -ин) сделать все остальное. Это устраняет много ограничений на графику решетки; Если изображение должно отображаться в три раза больше нормального размера, то браузер используется для рисования круга в соответствии с правильным размером без необходимости выполнения общего метода вставки изображения решетки. Аналогичным образом, инструкции, полученные в браузере, могут быть легче привязать к внешним источникам информации (например, приложение и база данных)

В системе HTML наиболее часто используемой технологией векторизации - это новые добавленные элементы Canvas SVG и HTML5. Обе технологии поддерживают рисование векторных карт и решетку.

Масштабирующая векторная графика (SVG (SVG) -это язык, который описывает двухмерную графику (SVG строго следует за синтаксисом XML). SVG позволяет три типа графических объектов: векторная графика (например, пути, состоящие из линейных и кривых), изображения и тексты. Графические объекты (включая текст) могут быть упакованы, стилизованы, преобразованы и объединены в ранее представленные объекты. Наборы функций SVG включают вложенную конверсию, пути сдвига, альфа -маски и шаблонные объекты.

Рисунок SVG является интерактивным и динамичным. Например, вы можете использовать сценарии для определения и запуска анимации. Это очень мощно по сравнению с Flash. Flash - это двоичный файл, который труднее создать и изменить его. SVG - это текстовый файл, а динамическая операция довольно проста. Кроме того, SVG напрямую предоставляет связанные элементы для завершения анимации, которая очень удобна для работы.

SVG совместим с другими веб -стандартами и напрямую поддерживает модель объекта документа DOM. Это также очень мощно по сравнению с холстом в HTML5 (обратите внимание, что SVG также использует аналогичный холст, чтобы показать графику SVG. Вы обнаружите, что многие функции немного похожи на холст HTML5; в статье, если она есть Не четко заявил, что это холст SVG, он относится к элементу холста в HTML5). Следовательно, может быть удобно использовать сценарий для достижения многих расширенных приложений SVG. И графические элементы SVG в основном поддерживают стандартные события в DOM. Большое количество программ обработки событий (таких как Onmouseover и Onclick) может быть выделено на любой графический объект SVG. Хотя скорость рендеринга SVG не так хороша, как элемент холста, она очень гибкая в операции DOM.

Можно сказать, что SVG является протоколом или языком;

SVG не является чем -то в HTML5, но это также одна из технических методов на странице, и давайте поместим его на эту тему.

По сравнению с другими форматами изображений, SVG имеет много преимуществ (многие преимущества поступают от преимуществ векторной карты):

• Файл SVG - это чистый XML, который можно прочитать и изменять множеством инструментов (таких как блокнот).

• По сравнению с JPEG и GIF -изображениями SVG меньше и более сжато.

• SVG масштабируется и может быть увеличен, когда качество изображения уменьшается.

• Текст в изображении SVG является необязательным, и он также доступен (подходит для изготовления карт).

• SVG может работать с технологией Java.

• SVG - это стандарт открытости.

Основным конкурентом SVG является Flash. По сравнению со Flash наибольшим преимуществом SVG является то, что он совместим с другими стандартами (например, XSL и DOM) и удобно работать, в то время как Flash является непопулярной частной технологией. Другие, такие как форматы хранения и динамическая графика, SVG также занимает большое преимущество.

Браузер, который поддерживает HTML5 и SVG, не является центром обсуждения. Для браузеров, которые непосредственно поддерживают SVG, SVG в основном использует две стороны и два способа.

Inner United на HTML

SVG - это стандартный HTML -элемент, просто напишите его непосредственно в HTML.

 <? XML версия = 1.0 Encoding = UTF-8?> <! Doctype html> <html> <Head> <!-<Meta Content = text /html; -> <Title> моя первая страница SVG </title> </head> <body> <svg xmlns = http://www.w3.org/2000/svg версии = 1.1 ширина = 200px height = 200px> <st> x = 0 y = 0 Ширина = 100% высота = 100% заполнение = nock = black/> <circle cx = 100 cy = 100 r = 50 стиль: черный; > < /body> < /html>

Обратите внимание, что начало оператора XML в начале и пространство имени SVG, XMLN, версии и т. Д., В основном рассматривая проблему совместимости;

Независимый файл SVG

Независимый SVG относится к предоставлению векторного графического формата файла путем расширения расширения файла SVG. Этот файл SVG встроен в браузер.

1. Независимый файл/страница SVG, определенный шаблон в основном похож на следующее:

 <ширина SVG = 100% высота = 100%> <!-SVG разметка здесь .-> </svg>

Сохраните такие текстовые файлы в файлы с SVG в качестве расширения, например, Sun.svg.

2. HTML ссылается на внешний файл SVG.

Используйте элементы Object или IMG для внедрения графики SVG, например, следующего примера:

 <! Реализуйте резервный код здесь или отобразите сообщение:-> <p> Ваш браузер не поддерживает обновление до современного браузера. = 10 ширина = 30 высот = 30 ход = черное заполнение = прозрачная ширина хода = 5/> <rad = 10 rx = 10 ширина = 30 высота = 30 Troke = Black Fill = прозрачная ширина хода = 5/> <Circle CX = 25 Cy = 75 r = 20 ход = красное заполнение = прозрачная ширина хода = 5/> <ellipse cx = 75 rx = 20 ry = 5 s troke = red fill = прозрачная ширина хода = 5/> <линия x1 = 10 x2 = 50 y1 = 110 y2 = 150 ход = оранжевый залив = прозрачная ширина хода = 5/> <Полилиновые точки = 6 0 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145 Стало = Оранжевое заполнение = Прозрачная ширина хода = 5/> <Полигоны точки = 50 160 55 180 60 65 205 305 205 40 180 45 18 0 Стало = зеленое заполнение = прозрачная ширина хода = 5/> <Путь D = M20, 230 Q40, 205 50, 230 T90, 230 fill = none sturk = blue-width = 5/svg>

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