SVG примеры ↓

Категория: Статьи о графике -> Векторная графика (SVG)

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

Для просмотра примеров вам понадобится браузер последней версии (Firefox, Opera, Chrome, Safari, IE9).

1. Овалы, созданные при помощи JavaScript и path. 

2. Бабочка. Достаточно сложный для векторной графики рисунок. 

3. Молекулярная схема.

4. Молекулярная схема, увеличенная в несколько раз. Демонстрируется одно из преимуществ SVG - масштабирование без потери качества.

5. Круги. Полупрозрачные, разноцветные, пересекающиеся.

6. Те же круги, но на фоне растрового рисунка.

7. Управляемый треугольник. Демонстрация того, что каждый элемент SVG - это элемент DOM (такой же элемент страницы, как, например, <div>). Управление элементами DOM с легкостью берет на себя JavaScript.

8. Управляемый треугольник с расширенными возможностями.

9. Простые эллипсы.

10. Круги, реагирующие на клик мышкой. Демонстрация связи SVG и JavaScript onclick.

11. Круг, который можно перемещать мышкой. Демонстрация связи SVG и JavaScript.

12. Градиент, созданный с помощью SVG.

13. Еще один градиент.

14. Просто линии разной формы.

15. Тигренок. Еще один достаточно сложный для векторной графики рисунок.

16. Прозрачные звездочки. Демонстрация параметра opacity и взаимодействия SVG и JavaScript.

16. Прозрачные звездочки 2. Демонстрация CSS прозрачности.

17. Демонстрация Paths.

18. Демонстрация Paths 2.

19. Демонстрация Paths 3 . Диаграммы.

20. Демонстрация Polygons 1.

21. Демонстрация Polygons 2. CSS свойство :hover позволяет присваивать стиль элементу при наведении мышкой.

22. Демонстрация Polygons 3. attribute-selectors, CSS :hover

23. Взрослый тигр.

24. Пара игрушек, написанных на SVG и JavaScript: тетрис и платформа.

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

26. Многоугольники 2. Демонстрация смеси SVG и CSS (:hover).

27. Примеры SMIL анимации.

28. Демонстрация работы JS библиотеки Raphael тут.

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

Спасибо http://croczilla.com/bits_and_pieces/svg/samples/

Дата: 2010.07.04 в 13:47:36
Пожалуйста, при копировании материала ставьте активную ссылку на статью.


Все комментарии (2):
waqu 2013.06.19 20:49:13

Отсутствует пример:
11. Круг, который можно перемещать мышкой

Serge 2014.04.15 18:40:53

Пример использования SVG для отображения мнемосхем http://svgmnemo.ru


Ваш комментарий

Имя:


Содержание: