Что такое SVG и как он работает?

Question

Как работает SVG в CSS? Например, чтобы иметь градиенты в IE9, я использовал этот редактор. http://www.colorzilla.com/gradient-editor/

Он выдает некоторый код для IE9, который использует структуру SVG. Может кто-нибудь объяснить, что это такое и как именно это работает? Таким образом, он не загружает файл из любого места, просто использует свойство data url для компиляции SVG-файла.

Что означает data:image/svg+xml;base64?

Это замедляет рендеринг страницы? Я знаю, что PIE немного замедляет его, поэтому просто задаюсь вопросом, какое значение имеет это для IE9 вместо PIE для градиентов.

Answer 1

Это URL данных ( ссылка @ MDN ). image/svg+xml говорит, что это изображение SVG (а не png или что-то еще). Наконец, base64 означает, что следующий контент кодируется с использованием base64 .

Answer 2

Это означает, что вы встраиваете изображение в кодировке Base 64 в свой CSS-файл, чтобы вашему приложению не приходилось делать еще один явный http-запрос на изображение.Он включен в ваш файл CSS.

Answer 3

Вы можете использовать SVG-файлы, как обычный jpg в вашем CSS.Например, background: url(image.svg);.Это один из способов реализовать SVG с помощью CSS.