<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

Весь курс соткан из практических примеров реальной вёрстки. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены!

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Что такое SVG? Основы.

Что такое SVG? Основы.

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

SVG(Scalable Vector Graphic) - это язык для описания двумерной графики, основанный на XML. Данная технология постепенно набирает обороты, а связано это вот с чем:

  • При изменении масштаба svg фигуры всегда перерисовываются, благодаря чему вы всегда будете видеть гладкое и красивое изображение без пикселизации
  • Браузеру не нужно запрашивать картинку у сервера, т.к. он сам её рисует, следовательно, производительность повышается
  • Можно стилизовать объекты с помощью CSS, как обычные html элементы, или с помощью JavaScript
  • Можно редактировать или анимировать с помощью CSS и JavaScript
  • Меньший размер

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

Для начала стоит отметить, что все наши фигуры должны быть в теге svg, а теперь давайте нарисуем линию. Для отображения линии служит тег line, который имеет следующие атрибуты:

  • x1 - Начальная x координата
  • x2 - Конечная x координата
  • y1 - Начальная y координата
  • y2 - Конечная y координата
  • stroke-width - Ширина линии
  • stroke - Цвет линии
<svg>
  <line x1="10" y1="10" x2="170" y2="170" stroke-width="1" stroke="#0f0">
</svg>

Линия на SVG

Но что, если нам нужно нарисовать сразу несколько линий? Использовать несколько тегов line было бы не очень красиво. Для этого существует тег polyline.

<svg>
  <polyline points="10,10 50,10 100,100 10, 100 10, 10" stroke-width="1" stroke="rgb(0,0,0)" fill="rgba(100,170,10,.3)">
</svg>

Трапеция на SVG

У тега polyline есть атрибут points, где мы указываем координаты x и y через запятую, затем делаем пробел и пишем координаты следующей точки и так далее. Заметьте, что тут есть атрибут fill, в котором мы можем указать цвет в любом из форматов css, которым будет залито пространство между линиями. Если же вы хотите, чтобы пространство между линиями было пустым, то укажите значение none.

Перейдём к более сложным фигурам и нарисуем прямоугольник.

<svg>   <rect width="300" height="100" fill="green" stroke-width="1" stroke="#000"> </svg>

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

Для того, чтобы нарисовать прямоугольник, нужно использовать тег rect, где в атрибутах width и height указать ширину и высоту соотвественно, а остальные атрибуты вам уже знакомы и выполняют абсолютно те же функции, что и с линиями.

Переходим дальше и попробуем нарисовать круг

<svg>
  <circle cx="100" cy="75" r="70" fill="rgba(10,70,10, .7)">
</svg>

Круг на SVG

Для отрисовки круга служит тег circle и атрибуты cx, cy и r для задания координат центра круга и его радиуса.

Другой элемент - эллипс рисуется точно так же, как и круг, но там мы можем сами задавать радиусы по оси x и по оси y. Для его отрисовки служит тег ellipse

<svg>
  <ellipse cx="100" cy="75" rx="50" ry="30" fill="rgba(10,70,10, .7)">
</svg>

Эллипс на SVG

Если вам нужно выводить многогранные фигуры, такие как пятиугольник, то воспользуйтесь тегом polygon

<svg>
  <polygon points="50,50 100,100 150,100 100,50 150," fill="#ccc" stroke-width="1" stroke="rgb(0,0,0)">
</svg>

Параллелограмм на SVG

Атрибут points у тега polygon работает так же, как и атрибут points у тега polyline.

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

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

SVG поддерживается IE c 9 версии, Mozilla Firefox с 1.5, Google Chrome с 3.0 и оперой с 8.0.

На этом статья подошла к концу. Получилась она большой, но простой. В следующей мы продолжим изучать эту интересную технологию, а на этом всё. Удачи!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (5):

kjuby kjuby 10.05.2014 00:29:09

...интересно но не совсем понятно ...

Ответить

php_programmer php_programmer 10.05.2014 00:46:42

Что именно Вам непонятно? Вы можете задать вопрос, относящийся к этой статье, здесь.

Ответить

татьяна татьяна 27.06.2015 15:03:26

странно. я делаю табличную страницу. рисую линию над текстом в столбце. в итоге ПОД линией образуется огромное лишнее пространство сантиметра в четыре????

Ответить

php_programmer php_programmer 27.06.2015 18:36:09

Если Вы хотите, чтобы Вам помогли, то залейте код на http://jsfiddle.net/

Ответить

tryk tryk 20.07.2015 17:38:51

Михаил,вопрос не по теме. Как в notepad ++ вставить код после определённого кода Например: есть код xxx и он повторяется сразу в нескольких местах Допустим мне нужно после каждого кода xxx вставить код ууу.Понимаю,что вручную можно проставить.Но можно ли не вручную?

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.