src/lab10/info01.html - master - akryukov/programming-basics

src/lab10/info01.html
48 строк4 KB
Alexander Kryukov
implement lab12-15 in java assembler
28 мар 2019, 17:11
28 мар 2019, 17:11abc026f
<div class="task_block" id="info1">
	<div class="task_desc"><p>SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки двумерной векторной графики в формате XML.</p>
	<p>Особенности SVG:
	<ul>
	<li>SVG рисунок это текстовый файл с расширением .svg</li>
	<li>SVG рисунки могут встраиваться в HTML страницы (с расширением .html)</li>
	<li>SVG широко используется для описания векторной графики в Интернете</li>
	<li>SVG описывает рисунок в формате XML.</li>
	<li>Рисунки в формате SVG не теряют качество при масштабировании, растяжении или сжатии.</li>
	<li>Все элементы SVG рисунка могут быть анимированы</li>
	<li>SVG соответствует международным стандартам DOM и XSL</li>
	</ul></p>
	<p>Существует множество программ для их редактирования, например Inkscape, CorelDRAW, Adobe Illustrator. В рамках данной лабораторной работы мы будем создавать векторные рисунки с помощью функций текстового вывода в файл.</p>
	<p>Для того, чтобы немедленно увидеть результат наших действий, мы воспользуемся возможностью встраивать SVG рисунки внутрь HTML страниц.</p>
	<p>Создайте текстовый файл, скопируйте в него следующий код.</p>
	<div class="preformatted check_single">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;/&gt;
&lt;head/&gt;
&lt;body&gt;
&lt;h1&gt;Мой первый векторный рисунок&lt;/h1&gt;

&lt;svg width=&quot;800&quot; height=&quot;600&quot;&gt;
	&lt;circle cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;40&quot; stroke=&quot;green&quot; stroke-width=&quot;4&quot; fill=&quot;yellow&quot; /&gt;
&lt;/svg&gt;
&lt;/body&gt;
&lt;/html&gt;
	</div>
	<p>Сохраните файл с расширением «.html».
	Откройте получившийся файл в браузере. В результате вы должны увидеть следующее изображение.</p>
	<img src="images/Main example.png"/>
	<p>Обратите внимание:
	<ul>
		<li>Описание SVG рисунка начинается с элемента &lt;svg&gt;</li>
		<li>Высота и ширина SVG рисунка описывается атрибутами элемента &lt;svg&gt;.
Высоте соответствует height. Ширине соответствует width.</li>
		<li>Элемент &lt;circle&gt; используется для создания круга.</li>
		<li>Атрибуты cx и cy описывают координаты центра круга по оси X и Y.
Если они не будут указаны, то центр будет находиться в точке (0,0)</li>
		<li>Атрибут r описывает радиус круга.</li>
		<li>Атрибут stroke указывает на цвет обводки круга, а stroke-width – на толщину линии.
Данный круг обведен зеленой (green) линией толщиной 4 пикселя.</li>
		<li>Атрибут fill описывает цвет заливки круга. В данном примере он желтый (yellow).</li>
		<li>Описание SVG рисунка заканчивается элементом &lt;/svg&gt;</li>
	</ul></p>
	</div>
	</div>