html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Введение в масштабируемую векторную графику (SVG)

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

Преимущества SVG

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

Масштабируемость

Растровое изображение состоит из пикселей и при изменении масштаба теряет свое качество, в то время как векторная графика сохраняет свои пропорции независимо от масштаба.

Ускорение HTTP-запроса

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

Стилизация и сценарии

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

Изображения могут быть анимированы и редактируемыми

SVG-объект может быть анимирован, если использовать анимацию элемента при помощи css или  JavaScript (JQuery).  SVG-объект может быть отредактирован любым текстовым редактором или графическим векторным редактором, например Inkscape  или Adobe Illustrator .

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

SVG имеет меньший размер файла по сравнению с растровым изображением.

Создание простых фигур при помощи SVG

Согласно спецификации, мы можем создать некоторые базовые фигуры , такие как прямоугольники, круги, линии, эллипсы, ломаные линии и многоугольники при помощи SVG и для того, чтобы браузер для отображал SVG- графику, все эти графические элементы должны быть вставлены в тег <svg> ... </svg> <svg> ... </svg>тег. Давайте посмотрим на примеры ниже:

Линия

Чтобы нарисовать линию в SVG можно использовать  элемент <line>. Этот элемент используется для рисования одной прямой, поэтому она будет состоять только из двух точек, начало и конец.

<svg>
<line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

Как вы можете видеть выше, точка начала координат линии выражается с первыми двумя атрибутами x1и  x2, а конечной точкой линии координат выражены с  y1и y2 .

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

    style="stroke-width:1; stroke:rgb(0,0,0);"

она в конечном итоге просто делает то же самое.

Смотрите демо

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

Этот элемент похож на  <line>, но при помощи <polyline>элемента мы можем нарисовать несколько линий вместо одной. Вот пример:

<svg>
<polyline points="0,0 50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

Смотрите демо

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

Рисование прямоугольника также просто с этим <rect>элемент. Нам нужно только указать ширину и высоту, вот так:

<svg>
<rect width="200" height="200" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

Смотрите демо

Круг

Мы также можем нарисовать круг с  <circle>элемент. В следующем примере мы создадим круг с  100радиус которых определяется при помощи атрибута r :

<svg>
<circle cx="102" cy="102" r="100" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

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

Смотрите демо

Эллипс

Мы можем нарисовать эллипс при помощи тега <ellipse>. Принцип создания такой же, как с кругом, но на этот раз мы можем контролировать  x-радиус линии и y-радиус, а также  rxи ry атрибуты;

<svg>
<ellipse cx="100" cy="50" rx="100" ry="50" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

Смотрите демо

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

При помощи элемента <polygon>  мы можем сделать многосторонние формы, такие  как треугольник, шестиугольник и даже прямоугольник. Вот пример:

<svg>
<polygon points="70.444,218.89 15.444,118.89 70.444,18.89 180.444,18.89 235.444,118.89 180.444,218.89" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

Смотрите демо

Использование векторного графического редактора

Как вы можете видеть, используя простые объекты  SVG в HTML-документе довольно легко. Однако, когда объект становится более сложным, этот способ уже не идеален.

К счастью, как мы уже упоминали выше, мы можем использовать векторный графический редактор, например Adobe Illustrator или Inkscape .

Если вы работаете с Inkscape, вы можете сохранить ваши векторной файлы в SVG-формате, а затем открыть его в текстовом редакторе кода.  Скопируйте все коды и вставлять их в ваш HTML-документ.

Вы можете вставлять .svg-файлы при помощи тегов embed, iframeи  object, например;

<object data="images/ipod.svg" type="image/svg+xml"></object>

Результат в конечном итоге будет тот же.

*В этом примере мы используем изображение Apple iPod от OpenClipArt.org

Смотрите демо

Поддержка браузерами

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

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

window.onload=function() {
	//the Raphael code goes here
}

Внутри тега body, поместите следующие divс  ID-атрибутом rsr;

<div id="rsr"></div>

Вот и все, что вам нужно сделалать.

Смотрите демо

Заключительные мысли

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

Автор: hongkiat

Перевод: Дежурка

Возможно, вас также заинтересуют статьи:

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

17

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • dejurka-magazine
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции