Лекция3-ИТ-HTML5

Сохраняем в формате простой SVG

Теперь открываем сохраненный рисунок с помощью текстового редактора (напр. Блокнот), также мы можем найти в браузере исходный код, либо открыть через

Visual Studio

В данном коде мы можем изменить цвет, размеры, шрифты и другие свойства полученного SVG Например, в теге <text>

style="font-size:269.33029175px;font-style:normal;font- variant:normal;font-weight:bold;font-

stretch:normal;fill:#00ff00;font-family:Tekton Pro;-inkscape- font-specification:Tekton Pro Bold">HTML 5</tspan

мы изменяем цвет текста с зеленого на голубой, изменив

#00ff00 на #15afde

изменяем размер font-size:269.33029175px -> на fontsize:200px

и т д

Кроме того мы можем изменить расстояния между буквами, словами, шрифт и другие свойства в данном теге:

<text

x="330.83032"

y="371.47327"

transform="scale(0.54530204,1.8338461)"

id="text3758"

xml:space="preserve" style="font-size:67px;font-style:normal;font-variant:normal;font-

weight:bold;font-stretch:normal;line-

height:125%;letter-spacing:8px;word-spacing:0px;fill:#00ff00;fill- opacity:1;stroke:none;font-family:Tekton Pro;-inkscape-

font-specification:Tekton Pro Bold"><tspan x="330.83032"

y="371.47327"

id="tspan3760" style="font-size:200px;font-style:normal;font-variant:normal;font-

weight:bold;font-

stretch:normal;fill:#15afde;font-family:Tekton Pro;-inkscape-font- specification:Tekton Pro Bold">HTML 5</tspan></text>

В следующем теге мы можем изменить координаты точек контуров круга, его цвет и т д

<path

d="M 390,57.3125 C 208.90589,57.3125 62.09375,270.6334 62.09375,533.78125 62.09375,796.9291 208.90589,1010.25

390,1010.25 571.09411,1010.25 717.90625,796.9291 717.90625,533.78125 717.90625,270.6334 571.09411,57.3125 390,57.3125 z M

417.15625,144 C 565.36495,144 685.5,310.85214 685.5,516.65625 c 0,205.80411 -120.13505,372.625 - 268.34375,372.625 -

148.2087,0 -268.375,-166.82089 -268.375,-372.625 C 148.78125,310.85214 268.94755,144 417.15625,144 z"

id="path2985" style="fill:#ffff00;fill-opacity:0.91363639;stroke:none"

/>

В ходе экспериментов мы получаем нечто подобное

1.Это не одна большая вещь

2.Вам не надо откидывать имеющееся

3.Легко начать

4.Это уже работает

5.Он уже здесь

1.Это не одна большая вещь

«Как я могу использовать HTML5, если старые браузеры его не поддерживают?»

2. Вам не надо откидывать имеющееся

Если ваше веб-приложение сегодня работает в HTML4, оно также будет работать в

HTML5