Главная/ Учимся Javascript, CSS, HTML/ Уроки SVG

Уроки SVG

  • Сокращение путей

    добавлено 27.02.2011

    Так как любой нетривиальный рисунок будет содержать многие десятки пар координат, элемент <path> имеет сокращенную вариант записи, чтобы представить путь минимальным количеством байт — из «Сущность SVG»

  • Трансформации skewX и skewY

    добавлено 20.01.2011

    В SVG имеется еще две трансформации: skewX и skewY. Они позволяют наклонить одну из осей — из «Сущность SVG»

  • Paths. Moveto, lineto, и closepath

    добавлено 23.02.2011

    Элемент <path> способен создавать фигуры произвольной формы с помощью произвольного числа отрезков и кривых, связанных между собой — из «Сущность SVG»

  • Группирование и привязка SVG объектов

    добавлено 07.12.2010

    О различных вариантах группировки в SVG: элементы g, use, defs, symbol, image — из «Сущность SVG».

  • Структура SVG документа и представление

    добавлено 27.11.2010

    SVG позволяет разделять структуру документа и его представление. Сейчас попробуем сравнить и сопоставить эти два понятия, обсудить аспекты представления документа более детально и показать некоторые элементы SVG, которые Вы сможете использовать для того, чтобы сделать структуру Вашего документа более четкой, читаемой и более простой в обслуживании — из «Сущность SVG».

  • Основные фигуры. Ломанная линия.

    добавлено 26.11.2010

    В конце нашего «обзора» основных фигур, мы рассмотрим ломанные линии — из «Сущность SVG».

  • Основные фигуры. Многоугольник.

    добавлено 25.11.2010

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

  • Основные фигуры. Круги и эллипсы.

    добавлено 24.11.2010

    Чтобы нарисовать круг, используйте элемент <circle>, для эллипса — <ellipse>.

  • Основные фигуры. Прямоугольники.

    добавлено 24.11.2010

    Прямоугольник — самая простая из основных фигур, отвечает за нее элемент <rect>.

  • Основные фигуры. Линии.

    добавлено 24.11.2010

    Рисуем прямые линии — используем <line>. Характеристики кисти: толщина, цвет, прозрачность, прерывистость.

  • Вложенные системы координат

    добавлено 21.11.2010

    Вы можете создать новую область просмотра со своей системой координат в любое время, вложив еще один элемент <svg> элемент в Ваш SVG-документ.

  • Сохранение пропорций

    добавлено 21.11.2010

    Что же происходит, если пропорции области просмотра и viewBox будут разными? Например, где пропорциональность viewBox равна 1/1, а у области просмотра — 1/3?

  • Координаты

    добавлено 21.11.2010

    Мир SVG — это бесконечный холст. В этой главе мы обсудим как дать понять браузеру какая именно часть этого холста Вам интересна, каковы размеры этой части и как найти точки на этом участке.

  • Создание SVG графики

    добавлено 17.11.2010

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

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

    добавлено 16.11.2010

    О сильной стороне векторной графики.

  • Начнем

    добавлено 16.11.2010

    Начнем мы со знакомства с двумя системами компьютерной графики: растровыми и векторными изображениями.

  • Содержание

    добавлено 16.11.2010

    Содержание книги «Сущность SVG».

  • О книге и переводе

    добавлено 16.11.2010

    «Сущность SVG» открывает двери в мир богатого языка, который позволяет взглянуть на графику в веб с новой стороны. Масштабируемая Векторная Графика (Scalable Vector Graphics) описывается текстом и как любой язык программирования, может быть прочитан. К тому SVG не зависит от платформы. Этот язык дает огромную власть дизайнерам и веб разработчикам, которые умеют с ним обращаться. И эта книга помогает понять, как пользоваться этой властью.

  • Последовательность трансформаций в SVG

    добавлено 18.12.2010

    Для объекта количество возможных трансформаций не ограничивается одной: можно задать несколько. При этом конечный результат зависит от порядка преобразований — из «Сущность SVG».

  • Прием: конвертация из декартовой системы координат

    добавлено 21.12.2010

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

  • Прием: масштабирование вокруг точки

    добавлено 18.01.2011

    Так же как в SVG возможно вращение вокруг произвольной точки, возможно и масштабирование — из «Сущность SVG».

  • Трансформация в SVG: масштабирование

    добавлено 15.12.2010

    SVG объектам можно изменять размеры масштабируя систему координат. Для этого используем значение scale атрибута transform — из «Сущность SVG».

  • Трансформация в SVG: перемещение

    добавлено 15.12.2010

    Для трансформаций (преобразований) фигур в SVG используется атрибут transform. Чтобы переместить объект нужно применить translate — одно из доступных значений transform — из «Сущность SVG».

  • Трансформация в SVG: поворот

    добавлено 21.12.2010

    О вращении системы координат и отдельных объектов в SVG — из «Сущность SVG».