SVG
Поделись знанием:
«Да, один за всех, я должен совершить или погибнуть! – думал он. – Да, я подойду… и потом вдруг… Пистолетом или кинжалом? – думал Пьер. – Впрочем, все равно. Не я, а рука провидения казнит тебя, скажу я (думал Пьер слова, которые он произнесет, убивая Наполеона). Ну что ж, берите, казните меня», – говорил дальше сам себе Пьер, с грустным, но твердым выражением на лице, опуская голову.
В то время как Пьер, стоя посередине комнаты, рассуждал с собой таким образом, дверь кабинета отворилась, и на пороге показалась совершенно изменившаяся фигура всегда прежде робкого Макара Алексеевича. Халат его был распахнут. Лицо было красно и безобразно. Он, очевидно, был пьян. Увидав Пьера, он смутился в первую минуту, но, заметив смущение и на лице Пьера, тотчас ободрился и шатающимися тонкими ногами вышел на середину комнаты.
– Они оробели, – сказал он хриплым, доверчивым голосом. – Я говорю: не сдамся, я говорю… так ли, господин? – Он задумался и вдруг, увидав пистолет на столе, неожиданно быстро схватил его и выбежал в коридор.
Герасим и дворник, шедшие следом за Макар Алексеичем, остановили его в сенях и стали отнимать пистолет. Пьер, выйдя в коридор, с жалостью и отвращением смотрел на этого полусумасшедшего старика. Макар Алексеич, морщась от усилий, удерживал пистолет и кричал хриплый голосом, видимо, себе воображая что то торжественное.
– К оружию! На абордаж! Врешь, не отнимешь! – кричал он.
– Будет, пожалуйста, будет. Сделайте милость, пожалуйста, оставьте. Ну, пожалуйста, барин… – говорил Герасим, осторожно за локти стараясь поворотить Макар Алексеича к двери.
– Ты кто? Бонапарт!.. – кричал Макар Алексеич.
– Это нехорошо, сударь. Вы пожалуйте в комнаты, вы отдохните. Пожалуйте пистолетик.
– Прочь, раб презренный! Не прикасайся! Видел? – кричал Макар Алексеич, потрясая пистолетом. – На абордаж!
– Берись, – шепнул Герасим дворнику.
Макара Алексеича схватили за руки и потащили к двери.
Сени наполнились безобразными звуками возни и пьяными хрипящими звуками запыхавшегося голоса.
Вдруг новый, пронзительный женский крик раздался от крыльца, и кухарка вбежала в сени.
– Они! Батюшки родимые!.. Ей богу, они. Четверо, конные!.. – кричала она.
Герасим и дворник выпустили из рук Макар Алексеича, и в затихшем коридоре ясно послышался стук нескольких рук во входную дверь.
Пьер, решивший сам с собою, что ему до исполнения своего намерения не надо было открывать ни своего звания, ни знания французского языка, стоял в полураскрытых дверях коридора, намереваясь тотчас же скрыться, как скоро войдут французы. Но французы вошли, и Пьер все не отходил от двери: непреодолимое любопытство удерживало его.
Их было двое. Один – офицер, высокий, бравый и красивый мужчина, другой – очевидно, солдат или денщик, приземистый, худой загорелый человек с ввалившимися щеками и тупым выражением лица. Офицер, опираясь на палку и прихрамывая, шел впереди. Сделав несколько шагов, офицер, как бы решив сам с собою, что квартира эта хороша, остановился, обернулся назад к стоявшим в дверях солдатам и громким начальническим голосом крикнул им, чтобы они вводили лошадей. Окончив это дело, офицер молодецким жестом, высоко подняв локоть руки, расправил усы и дотронулся рукой до шляпы.
– Bonjour la compagnie! [Почтение всей компании!] – весело проговорил он, улыбаясь и оглядываясь вокруг себя. Никто ничего не отвечал.
– Vous etes le bourgeois? [Вы хозяин?] – обратился офицер к Герасиму.
Герасим испуганно вопросительно смотрел на офицера.
– Quartire, quartire, logement, – сказал офицер, сверху вниз, с снисходительной и добродушной улыбкой глядя на маленького человека. – Les Francais sont de bons enfants. Que diable! Voyons! Ne nous fachons pas, mon vieux, [Квартир, квартир… Французы добрые ребята. Черт возьми, не будем ссориться, дедушка.] – прибавил он, трепля по плечу испуганного и молчаливого Герасима.
– A ca! Dites donc, on ne parle donc pas francais dans cette boutique? [Что ж, неужели и тут никто не говорит по французски?] – прибавил он, оглядываясь кругом и встречаясь глазами с Пьером. Пьер отстранился от двери.
Офицер опять обратился к Герасиму. Он требовал, чтобы Герасим показал ему комнаты в доме.
– Барин нету – не понимай… моя ваш… – говорил Герасим, стараясь делать свои слова понятнее тем, что он их говорил навыворот.
Французский офицер, улыбаясь, развел руками перед носом Герасима, давая чувствовать, что и он не понимает его, и, прихрамывая, пошел к двери, у которой стоял Пьер. Пьер хотел отойти, чтобы скрыться от него, но в это самое время он увидал из отворившейся двери кухни высунувшегося Макара Алексеича с пистолетом в руках. С хитростью безумного Макар Алексеич оглядел француза и, приподняв пистолет, прицелился.
– На абордаж!!! – закричал пьяный, нажимая спуск пистолета. Французский офицер обернулся на крик, и в то же мгновенье Пьер бросился на пьяного. В то время как Пьер схватил и приподнял пистолет, Макар Алексеич попал, наконец, пальцем на спуск, и раздался оглушивший и обдавший всех пороховым дымом выстрел. Француз побледнел и бросился назад к двери.
Забывший свое намерение не открывать своего знания французского языка, Пьер, вырвав пистолет и бросив его, подбежал к офицеру и по французски заговорил с ним.
– Vous n'etes pas blesse? [Вы не ранены?] – сказал он.
– Je crois que non, – отвечал офицер, ощупывая себя, – mais je l'ai manque belle cette fois ci, – прибавил он, указывая на отбившуюся штукатурку в стене. – Quel est cet homme? [Кажется, нет… но на этот раз близко было. Кто этот человек?] – строго взглянув на Пьера, сказал офицер.
– Ah, je suis vraiment au desespoir de ce qui vient d'arriver, [Ах, я, право, в отчаянии от того, что случилось,] – быстро говорил Пьер, совершенно забыв свою роль. – C'est un fou, un malheureux qui ne savait pas ce qu'il faisait. [Это несчастный сумасшедший, который не знал, что делал.]
Офицер подошел к Макару Алексеичу и схватил его за ворот.
Макар Алексеич, распустив губы, как бы засыпая, качался, прислонившись к стене.
– Brigand, tu me la payeras, – сказал француз, отнимая руку.
– Nous autres nous sommes clements apres la victoire: mais nous ne pardonnons pas aux traitres, [Разбойник, ты мне поплатишься за это. Наш брат милосерд после победы, но мы не прощаем изменникам,] – прибавил он с мрачной торжественностью в лице и с красивым энергическим жестом.
Пьер продолжал по французски уговаривать офицера не взыскивать с этого пьяного, безумного человека. Француз молча слушал, не изменяя мрачного вида, и вдруг с улыбкой обратился к Пьеру. Он несколько секунд молча посмотрел на него. Красивое лицо его приняло трагически нежное выражение, и он протянул руку.
– Vous m'avez sauve la vie! Vous etes Francais, [Вы спасли мне жизнь. Вы француз,] – сказал он. Для француза вывод этот был несомненен. Совершить великое дело мог только француз, а спасение жизни его, m r Ramball'я capitaine du 13 me leger [мосье Рамбаля, капитана 13 го легкого полка] – было, без сомнения, самым великим делом.
Но как ни несомненен был этот вывод и основанное на нем убеждение офицера, Пьер счел нужным разочаровать его.
– Je suis Russe, [Я русский,] – быстро сказал Пьер.
– Ти ти ти, a d'autres, [рассказывайте это другим,] – сказал француз, махая пальцем себе перед носом и улыбаясь. – Tout a l'heure vous allez me conter tout ca, – сказал он. – Charme de rencontrer un compatriote. Eh bien! qu'allons nous faire de cet homme? [Сейчас вы мне все это расскажете. Очень приятно встретить соотечественника. Ну! что же нам делать с этим человеком?] – прибавил он, обращаясь к Пьеру, уже как к своему брату. Ежели бы даже Пьер не был француз, получив раз это высшее в свете наименование, не мог же он отречься от него, говорило выражение лица и тон французского офицера. На последний вопрос Пьер еще раз объяснил, кто был Макар Алексеич, объяснил, что пред самым их приходом этот пьяный, безумный человек утащил заряженный пистолет, который не успели отнять у него, и просил оставить его поступок без наказания.
Француз выставил грудь и сделал царский жест рукой.
– Vous m'avez sauve la vie. Vous etes Francais. Vous me demandez sa grace? Je vous l'accorde. Qu'on emmene cet homme, [Вы спасли мне жизнь. Вы француз. Вы хотите, чтоб я простил его? Я прощаю его. Увести этого человека,] – быстро и энергично проговорил французский офицер, взяв под руку произведенного им за спасение его жизни во французы Пьера, и пошел с ним в дом.
Солдаты, бывшие на дворе, услыхав выстрел, вошли в сени, спрашивая, что случилось, и изъявляя готовность наказать виновных; но офицер строго остановил их.
– On vous demandera quand on aura besoin de vous, [Когда будет нужно, вас позовут,] – сказал он. Солдаты вышли. Денщик, успевший между тем побывать в кухне, подошел к офицеру.
– Capitaine, ils ont de la soupe et du gigot de mouton dans la cuisine, – сказал он. – Faut il vous l'apporter? [Капитан у них в кухне есть суп и жареная баранина. Прикажете принести?]
– Oui, et le vin, [Да, и вино,] – сказал капитан.
Французский офицер вместе с Пьером вошли в дом. Пьер счел своим долгом опять уверить капитана, что он был не француз, и хотел уйти, но французский офицер и слышать не хотел об этом. Он был до такой степени учтив, любезен, добродушен и истинно благодарен за спасение своей жизни, что Пьер не имел духа отказать ему и присел вместе с ним в зале, в первой комнате, в которую они вошли. На утверждение Пьера, что он не француз, капитан, очевидно не понимая, как можно было отказываться от такого лестного звания, пожал плечами и сказал, что ежели он непременно хочет слыть за русского, то пускай это так будет, но что он, несмотря на то, все так же навеки связан с ним чувством благодарности за спасение жизни.
Ежели бы этот человек был одарен хоть сколько нибудь способностью понимать чувства других и догадывался бы об ощущениях Пьера, Пьер, вероятно, ушел бы от него; но оживленная непроницаемость этого человека ко всему тому, что не было он сам, победила Пьера.
– Francais ou prince russe incognito, [Француз или русский князь инкогнито,] – сказал француз, оглядев хотя и грязное, но тонкое белье Пьера и перстень на руке. – Je vous dois la vie je vous offre mon amitie. Un Francais n'oublie jamais ni une insulte ni un service. Je vous offre mon amitie. Je ne vous dis que ca. [Я обязан вам жизнью, и я предлагаю вам дружбу. Француз никогда не забывает ни оскорбления, ни услуги. Я предлагаю вам мою дружбу. Больше я ничего не говорю.]
В звуках голоса, в выражении лица, в жестах этого офицера было столько добродушия и благородства (во французском смысле), что Пьер, отвечая бессознательной улыбкой на улыбку француза, пожал протянутую руку.
– Capitaine Ramball du treizieme leger, decore pour l'affaire du Sept, [Капитан Рамбаль, тринадцатого легкого полка, кавалер Почетного легиона за дело седьмого сентября,] – отрекомендовался он с самодовольной, неудержимой улыбкой, которая морщила его губы под усами. – Voudrez vous bien me dire a present, a qui' j'ai l'honneur de parler aussi agreablement au lieu de rester a l'ambulance avec la balle de ce fou dans le corps. [Будете ли вы так добры сказать мне теперь, с кем я имею честь разговаривать так приятно, вместо того, чтобы быть на перевязочном пункте с пулей этого сумасшедшего в теле?]
Пьер отвечал, что не может сказать своего имени, и, покраснев, начал было, пытаясь выдумать имя, говорить о причинах, по которым он не может сказать этого, но француз поспешно перебил его.
– De grace, – сказал он. – Je comprends vos raisons, vous etes officier… officier superieur, peut etre. Vous avez porte les armes contre nous. Ce n'est pas mon affaire. Je vous dois la vie. Cela me suffit. Je suis tout a vous. Vous etes gentilhomme? [Полноте, пожалуйста. Я понимаю вас, вы офицер… штаб офицер, может быть. Вы служили против нас. Это не мое дело. Я обязан вам жизнью. Мне этого довольно, и я весь ваш. Вы дворянин?] – прибавил он с оттенком вопроса. Пьер наклонил голову. – Votre nom de bapteme, s'il vous plait? Je ne demande pas davantage. Monsieur Pierre, dites vous… Parfait. C'est tout ce que je desire savoir. [Ваше имя? я больше ничего не спрашиваю. Господин Пьер, вы сказали? Прекрасно. Это все, что мне нужно.]
Когда принесены были жареная баранина, яичница, самовар, водка и вино из русского погреба, которое с собой привезли французы, Рамбаль попросил Пьера принять участие в этом обеде и тотчас сам, жадно и быстро, как здоровый и голодный человек, принялся есть, быстро пережевывая своими сильными зубами, беспрестанно причмокивая и приговаривая excellent, exquis! [чудесно, превосходно!] Лицо его раскраснелось и покрылось потом. Пьер был голоден и с удовольствием принял участие в обеде. Морель, денщик, принес кастрюлю с теплой водой и поставил в нее бутылку красного вина. Кроме того, он принес бутылку с квасом, которую он для пробы взял в кухне. Напиток этот был уже известен французам и получил название. Они называли квас limonade de cochon (свиной лимонад), и Морель хвалил этот limonade de cochon, который он нашел в кухне. Но так как у капитана было вино, добытое при переходе через Москву, то он предоставил квас Морелю и взялся за бутылку бордо. Он завернул бутылку по горлышко в салфетку и налил себе и Пьеру вина. Утоленный голод и вино еще более оживили капитана, и он не переставая разговаривал во время обеда.
– Oui, mon cher monsieur Pierre, je vous dois une fiere chandelle de m'avoir sauve… de cet enrage… J'en ai assez, voyez vous, de balles dans le corps. En voila une (on показал на бок) a Wagram et de deux a Smolensk, – он показал шрам, который был на щеке. – Et cette jambe, comme vous voyez, qui ne veut pas marcher. C'est a la grande bataille du 7 a la Moskowa que j'ai recu ca. Sacre dieu, c'etait beau. Il fallait voir ca, c'etait un deluge de feu. Vous nous avez taille une rude besogne; vous pouvez vous en vanter, nom d'un petit bonhomme. Et, ma parole, malgre l'atoux que j'y ai gagne, je serais pret a recommencer. Je plains ceux qui n'ont pas vu ca. [Да, мой любезный господин Пьер, я обязан поставить за вас добрую свечку за то, что вы спасли меня от этого бешеного. С меня, видите ли, довольно тех пуль, которые у меня в теле. Вот одна под Ваграмом, другая под Смоленском. А эта нога, вы видите, которая не хочет двигаться. Это при большом сражении 7 го под Москвою. О! это было чудесно! Надо было видеть, это был потоп огня. Задали вы нам трудную работу, можете похвалиться. И ей богу, несмотря на этот козырь (он указал на крест), я был бы готов начать все снова. Жалею тех, которые не видали этого.]
| Разработчик | |
|---|---|
| Последний выпуск |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) / 16 августа 2011 |
| Тип формата | |
| Расширен из | |
| Открытый формат? |
Да |
SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так и анимированную интерактивную графику — или, в иных терминах, декларативную и скриптовую. Не поддерживает описание трёхмерных объектов (не путать с имитацией трёхмерности путём светотени). Это открытый стандарт, который является рекомендацией консорциума W3C — организации, разработавшей такие стандарты, как HTML и XHTML. В основу SVG легли языки разметки VML и PGML. Разрабатывается с 1999 года. В 2001 году вышла версия 1.0, в 2011 - версия 1.1, которая остается актуальной до сегодняшнего дня. В настоящее время в активной разработке находится версия 2.
Содержание
Возможности языка
- Описание путей (англ. path). Позволяет задать любую фигуру компактной строкой, описывающей путь от начальной точки до конечной через любые промежуточные координаты. Строка с данными задаётся атрибутом
dтегаpathи содержит команды, закодированные набором букв и чисел. Буква определяет тип команды, числа — её параметры (чаще всего — координаты). Команды позволяют описывать фигуры, состоящие из отрезков прямых (L,H,V), кривых Безье (C,S,Q,T) и дуг (A). Пример, описывающий звезду из 5 линий, содержит строку данных с командамиM(англ. moveto — переместить) иL(англ. lineto — нарисовать линию), содержащими в качестве аргументов координаты точек по X и Y. В версиях SVG до 1.2 включительно описание путей возможно только в пикселях.
<path fill="none"
stroke="black" d="M 227 239 L 328 90 L 346 250 L 201 124 L 410 150 L 228 238" />- Описание основных геометрических фигур (многоугольники, прямоугольники, окружности и т. п.).
- Широкий спектр визуальных свойств, которые можно применить к фигурам и путям: окраска, прозрачность, скругление углов и т. д.
- Интерактивность. На каждый отдельный элемент и на целое изображение можно повесить обработчик событий (клик, перемещение, нажатие клавиши и т.д), таким образом, пользователь может управлять рисунком (например — перемещать мышкой некоторые элементы[1]).
- Анимация и сценарии. С помощью ECMAScript или JavaScript можно описывать даже самые сложные сценарии, связанные с математическими вычислениями координат и пропорций фигур. Вместе с интерактивностью и SMIL анимацией это дает очень широкие возможности для разработчиков веб-графики.
Достоинства формата
- Текстовый формат — файлы SVG можно читать и редактировать (при наличии некоторых навыков) при помощи обычных текстовых редакторов. При просмотре документов, содержащих SVG-графику, имеется доступ к просмотру кода просматриваемого файла и возможность сохранения всего документа. Кроме того, SVG-файлы обычно получаются меньше по размеру, чем сравнимые по качеству изображения в форматах JPEG или GIF, а также хорошо поддаются сжатию.
- Масштабируемость — SVG является векторным форматом. Существует возможность увеличить любую часть изображения SVG без потери качества. Дополнительно, к элементам SVG-документа возможно применять фильтры — специальные модификаторы для создания эффектов, подобных применяемым при обработке растровых изображений (размытие, выдавливание, сложные системы трансформации и др.) В тексте SVG-кода фильтры описываются тегами, визуализацию которых обеспечивает средство просмотра, что не влияет на размер исходного файла, обеспечивая при этом необходимую иллюстративную выразительность.
- Широко доступно использование растровой графики в SVG-документах. Имеется возможность вставлять элементы с изображениями в форматах PNG, GIF или JPG.
- Текст в графике SVG является текстом, а не изображением, поэтому его можно выделять и копировать, он индексируется поисковыми машинами, не нужно создавать дополнительные метафайлы для поисковых роботов.
- Анимация реализована в SVG с помощью языка SMIL (Synchronized Multimedia Integration Language), разработанного также консорциумом W3C. Поддерживаются скриптовые языки на основе спецификации ECMAScript. SVG-элементами можно управлять с помощью JavaScript. Применение скриптов и анимации в SVG позволяет создавать динамичную и интерактивную графику. В SVG обеспечивается событийная модель, отслеживаются события (загрузка страницы, изменение её параметров, события мыши, клавиатуры и др.) Анимация может запускаться по определенному событию (например «onmouseover» или «onclick»), что придаёт графике интерактивность. У каждого элемента есть свои собственные события, к которым можно привязывать отдельные скрипты.
- SVG — открытый стандарт. В отличие от некоторых других форматов, SVG не является чьей-либо собственностью.
- SVG-документы легко интегрируются с HTML и XHTML документами. Внешние SVG подключаются через тег <object>, значение атрибута data — имя файла с расширением «.svg», содержащего разметку SVG, type — MIME-тип, то есть image/svg+xml. Атрибуты width и height определяют размеры области SVG по горизонтали и по вертикали. Элементы SVG совместимы с HTML и DHTML.
- Совместимость с CSS (англ. Cascading Style Sheets). Отображением (форматированием и декорированием) SVG-элементов можно управлять с помощью таблицы стилей CSS 2.0 и её расширений, либо напрямую с помощью атрибутов SVG-элементов.
- SVG предоставляет все преимущества XML:
- Возможность работы в различных средах.
- Интернационализация (поддержка Юникода).
- Широкая доступность для различных приложений.
- Лёгкая модификация через стандартные API — например, DOM. SVG поддерживает стандартизированную W3C объектную модель документа DOM, обеспечивая доступ к любому элементу, что даёт широкие возможности по динамическому изменению элементов, их атрибутов и событий.
- Лёгкое преобразование таблицами стилей XSLT. Как любой основанный на XML формат, SVG дает возможность использовать для его обработки таблицы трансформации (XSLT). Преобразуя XML-данные в SVG с помощью простого XSL, можно легко получить графическое представление любых данных, например визуализировать химические молекулы, описанных на языке CML (Chemical Markup Language).
Недостатки формата
- SVG наследует все недостатки XML, такие как большой размер файла (впрочем, последний компенсируется существованием сжатого формата SVGZ, однако его использование на данный момент затруднено, так как SVGZ не имеет собственного mime-type).
- Сложность использования в крупных картографических приложениях из-за того, что для правильного отображения маленькой части изображения документ необходимо прочитать целиком.
- Чем больше в изображении мелких деталей, тем быстрее растёт размер SVG-данных. Предельный случай — когда изображение представляет собой белый шум. В этом случае SVG не только не даёт никаких преимуществ в размере файла, но даже даёт проигрыш по отношению к растровому формату. На практике, SVG становится невыгоден уже задолго до того, как изображение дойдёт до стадии белого шума.
Структура документа SVG
Первая строка — стандартный XML-заголовок, объявление (англ. XML declaration), указывающее версию XML (version) (обычно «1.0») и кодировку символов (encoding):
<?xml version="1.0" encoding="UTF-8" standalone="no"?>Во второй и третьей строках должен располагаться заголовок DOCTYPE, определяющий тип документа (англ. Document Type Definitions) DTD:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">К сожалению, в некоторых случаях при применении Mozilla Firefox со встроенным просмотрщиком SVG содержание объявления DOCTYPE может быть источником ошибок. Имеются рекомендации не использовать декларацию DOCTYPE в SVG версий 1.0. Вместо этого рекомендовано включать атрибут baseProfile в корневой элемент <svg> со значением «full»[2].
Если по каким-то причинам декларация DOCTYPE в документе необходима, рекомендовано использовать пустую декларацию, как в примере.
<!DOCTYPE svg [
<!-- ваши данные --> ]>В четвёртой строке размещается корневой элемент документа с указанием пространства имен SVG.
<svg version="1.1"
baseProfile="full"
xmlns="www.w3.org/2000/svg"
xmlns:xlink="www.w3.org/1999/xlink"
xmlns:ev="www.w3.org/2001/xml-events"
width="100%" height="100%">Далее идёт остальной текст документа вложенный в корневой элемент, где собственно располагаются элементы, описывающие содержание кодируемой сцены.
Завершается документ всегда закрытием корневого тега </svg> .
Примеры
- Простой статичный SVG-документ с контуром квадрата размером 400 пикселей и тремя полупрозрачными кругами радиусом 104 пикселей, по центру квадрата, каждый круг смещается от центра квадрата примерно на полрадиуса.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version = "1.1"
baseProfile="full"
xmlns = "www.w3.org/2000/svg"
xmlns:xlink = "www.w3.org/1999/xlink"
xmlns:ev = "www.w3.org/2001/xml-events"
height = "400px" width = "400px">
<rect x="0" y="0" width="400" height="400"
fill="none" stroke="black" stroke-width="5px" stroke-opacity="0.5"/>
<g fill-opacity="0.6" stroke="black" stroke-width="0.5px">
<circle cx="200px" cy="200px" r="104px" fill="red" transform="translate( 0,-52)" />
<circle cx="200px" cy="200px" r="104px" fill="blue" transform="translate( 60, 52)" />
<circle cx="200px" cy="200px" r="104px" fill="green" transform="translate(-60, 52)" />
</g>
</svg>Примечание: Этот код выполняется одинаково в Mozilla Firefox 2.0.0.11 и в Internet Explorer 6.0.2900.2180 (SVG Document Adobe Systems Inc.)
- Ещё один пример — прямоугольник с закруглёнными углами, заполняющий всю область отображения:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
baseProfile="full"
xmlns="www.w3.org/2000/svg"
xmlns:xlink="www.w3.org/1999/xlink"
xmlns:ev="www.w3.org/2001/xml-events"
width="100%" height="100%">
<rect fill="white" x="0" y="0" width="100%" height="100%" />
<rect fill="silver" x="0" y="0" width="100%" height="100%" rx="1em"/>
</svg>- Желтая звезда:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="198" height="188"
viewBox="0 0 198 188"
version="1.1"
baseProfile="full"
xmlns="www.w3.org/2000/svg"
xmlns:xlink="www.w3.org/1999/xlink"
xmlns:ev="www.w3.org/2001/xml-events">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="even-odd">
<polygon id="Star-1" stroke="#979797" stroke-width="3" fill="#F8E81C"
points="99 154 40 185 51 119 4 73 69 64 99 3 128 64 194 73 147 119 158 185 ">
</polygon>
</g>
</svg>
SVGZ
Поскольку код SVG занимает довольно много места, была создана «обёртка» SVGZ, когда SVG сжимают с помощью gzip, а полученному файлу присваивают расширение «SVGZ».
SVG хорошо сжимается, поскольку это текстовый XML-документ, имеющий регулярную структуру.
Поддержка в браузерах
| браузер | версия |
|---|---|
| Internet Explorer | 9+[3] |
| Mozilla Firefox | 1.5+[4] |
| Netscape Navigator | 9.0+ |
| Google Chrome | 3.0+ |
| Safari | 4.0+ |
| Opera | 8.0+ |
Спецификации стандарта
- [www.w3.org/TR/SVG12/ SVG 1.2 (предварительный)]
- [www.w3.org/TR/SVG11/ SVG 1.1]
- [www.w3.org/TR/SVGMobile12/ SVG Мобильный 1.2 (предварительный)]
- [www.w3.org/TR/SVGMobile/ SVG Мобильный]
- [www.w3.org/TR/SVGPrint/ SVG Печать]
- [www.w3.org/TR/SVG2Reqs/ SVG Требования (предварительный)]
Программное обеспечение
Приложения
- Adobe GoLive версии от CS2 — HTML-редактор.
- Adobe Illustrator версии от 10.0 — векторный графический редактор.
- CorelDRAW — векторный графический редактор.
- GIMP — свободный кроссплатформенный растровый графический редактор; позволяет открывать SVG файлы, при импорте происходит растеризация с заданным разрешением.
- Inkscape — свободный кроссплатформенный векторный графический редактор; использует SVG как основной формат.
- LibreOffice Draw, OpenOffice.org Draw — позволяет экспортировать и импортировать SVG-файлы.
- Microsoft Office Visio — способен сохранять проекты в формат SVG. При этом, файлы SVG, созданные в Microsoft Visio, некорректно отображаются при загрузке на Wikimedia.
- sK1 — свободный векторный графический редактор, только для Linux.
- Sketch — только для OSX.
- Sketsa SVG Editor — редактор SVG-файлов.
- [code.google.com/p/svg-edit/ svg-edit] — онлайн редактор для современных браузеров. Базируется на JavaScript.
Инструменты и библиотеки
- Batik — Java библиотека для генерации, отрисовки и различных манипуляций изображениями в SVG формате и основанный на этой библиотеке SVG-браузер — Squiggle[5].
- MetaPost — язык программирования, используемый для создания графических иллюстраций.
- librsvg — библиотека, используемая в MediaWiki для работы с SVG[6][7].
- [svgextension.codeplex.com/ SVG Viewer Extension for Windows Explorer] — расширение для проводника Windows, позволяющее просматривать в нём SVG файлы в виде эскизов.
- [snapsvg.io/about/ Snap] — библиотека JavaScript для работы с SVG.
Напишите отзыв о статье "SVG"
Примечания
- ↑ [graphing.ru/d/ Пример страницы, позволяющей создавать и редактировать SVG в браузере] (рус.)
- ↑ [jwatt.org/svg/authoring/#doctype-declaration SVG Authoring Guidelines:Don’t include a DOCTYPE declaration] (англ.)
- ↑ [ie.microsoft.com/testdrive/info/ReleaseNotes/Default.html#WPGN Windows Internet Explorer Platform Preview Release Notes] (англ.)
- ↑ Brockmeier, Joe. [www.linux.com/archive/feature/50209 Review: Firefox 1.5 and Thunderbird 1.5] (англ.), Linux.com (30 November 2005). Проверено 30 ноября 2009.
- ↑ [xmlgraphics.apache.org/batik/tools/browser.html Squiggle].
- ↑ [www.mediawiki.org/wiki/Manual:Image_Administration#SVG Manual:Image Administration — MediaWiki] (англ.)
- ↑ Однако, в стандартном дистрибутиве MediaWiki, по умолчанию прописан ImageMagick, что приводит к ошибкам в преобразовании SVG в PNG, например, неверные границы и отсутствие прозрачного фона в получаемом файле PNG. Устраняется с помощью $wgSVGConverter = 'rsvg'.
Ссылки
- [www.w3.org/Graphics/SVG/ Официальный раздел SVG на сайте W3 консорциума] (англ.)
- [www.opera.com/docs/specs/presto26/svg/elements/ Список] поддерживаемых элементов SVG в браузере Opera (англ.)
- [dev.opera.com/tags/svg/ Статьи о возможностях SVG от разработчиков Оперы] (англ.)
- [www.mozilla.org/projects/svg/faq.html FAQ] (англ.) о реализации SVG в браузере Mozilla Firefox
- [www.adobe.com/svg/ Страница] (англ.) формата SVG на сайте Adobe
- [xml.nsu.ru/extra/svgintro_0.xml Школы консорциума W3C. Введение в SVG] (рус.)
- [www.openclipart.org/ Открытые SVG клипарты (openclipart.org)]
- [v.sytnik.lviv.ua/ru/tags/svg-0/ Описание чертежей в формате SVG (v.sytnik.lviv.ua)] (рус.)
- [www.cmsmagazine.ru/library/items/graphical_design/how-to-use-svg/ Как использовать SVG для создания веб-анимации под все типы устройств]
Литература
- * Бэн Фрэйн. Глава 7. Использование SVG для достижения независимости от разрешения. // [www.htbook.ru/load/kompjutery_i_seti/setevye_tekhnologii/html5_i_css3_razrabotka_sajtov_dlja_ljubykh_brauzerov_i_ustrojstv/7-1-0-327 HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств] = Responsive Web Design with HTML5 and CSS3. Second Edition. PACKT publishing.. — 2 издание. — Санкт-Петербург: Питер, 2017. — С. 175-204. — 272 с. — ISBN 978-1784398934 англ. 978-5-496-02271-2.
| ||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||
Отрывок, характеризующий SVG
Был уже второй час после полудня. Французы уже вступили в Москву. Пьер знал это, но, вместо того чтобы действовать, он думал только о своем предприятии, перебирая все его малейшие будущие подробности. Пьер в своих мечтаниях не представлял себе живо ни самого процесса нанесения удара, ни смерти Наполеона, но с необыкновенною яркостью и с грустным наслаждением представлял себе свою погибель и свое геройское мужество.«Да, один за всех, я должен совершить или погибнуть! – думал он. – Да, я подойду… и потом вдруг… Пистолетом или кинжалом? – думал Пьер. – Впрочем, все равно. Не я, а рука провидения казнит тебя, скажу я (думал Пьер слова, которые он произнесет, убивая Наполеона). Ну что ж, берите, казните меня», – говорил дальше сам себе Пьер, с грустным, но твердым выражением на лице, опуская голову.
В то время как Пьер, стоя посередине комнаты, рассуждал с собой таким образом, дверь кабинета отворилась, и на пороге показалась совершенно изменившаяся фигура всегда прежде робкого Макара Алексеевича. Халат его был распахнут. Лицо было красно и безобразно. Он, очевидно, был пьян. Увидав Пьера, он смутился в первую минуту, но, заметив смущение и на лице Пьера, тотчас ободрился и шатающимися тонкими ногами вышел на середину комнаты.
– Они оробели, – сказал он хриплым, доверчивым голосом. – Я говорю: не сдамся, я говорю… так ли, господин? – Он задумался и вдруг, увидав пистолет на столе, неожиданно быстро схватил его и выбежал в коридор.
Герасим и дворник, шедшие следом за Макар Алексеичем, остановили его в сенях и стали отнимать пистолет. Пьер, выйдя в коридор, с жалостью и отвращением смотрел на этого полусумасшедшего старика. Макар Алексеич, морщась от усилий, удерживал пистолет и кричал хриплый голосом, видимо, себе воображая что то торжественное.
– К оружию! На абордаж! Врешь, не отнимешь! – кричал он.
– Будет, пожалуйста, будет. Сделайте милость, пожалуйста, оставьте. Ну, пожалуйста, барин… – говорил Герасим, осторожно за локти стараясь поворотить Макар Алексеича к двери.
– Ты кто? Бонапарт!.. – кричал Макар Алексеич.
– Это нехорошо, сударь. Вы пожалуйте в комнаты, вы отдохните. Пожалуйте пистолетик.
– Прочь, раб презренный! Не прикасайся! Видел? – кричал Макар Алексеич, потрясая пистолетом. – На абордаж!
– Берись, – шепнул Герасим дворнику.
Макара Алексеича схватили за руки и потащили к двери.
Сени наполнились безобразными звуками возни и пьяными хрипящими звуками запыхавшегося голоса.
Вдруг новый, пронзительный женский крик раздался от крыльца, и кухарка вбежала в сени.
– Они! Батюшки родимые!.. Ей богу, они. Четверо, конные!.. – кричала она.
Герасим и дворник выпустили из рук Макар Алексеича, и в затихшем коридоре ясно послышался стук нескольких рук во входную дверь.
Пьер, решивший сам с собою, что ему до исполнения своего намерения не надо было открывать ни своего звания, ни знания французского языка, стоял в полураскрытых дверях коридора, намереваясь тотчас же скрыться, как скоро войдут французы. Но французы вошли, и Пьер все не отходил от двери: непреодолимое любопытство удерживало его.
Их было двое. Один – офицер, высокий, бравый и красивый мужчина, другой – очевидно, солдат или денщик, приземистый, худой загорелый человек с ввалившимися щеками и тупым выражением лица. Офицер, опираясь на палку и прихрамывая, шел впереди. Сделав несколько шагов, офицер, как бы решив сам с собою, что квартира эта хороша, остановился, обернулся назад к стоявшим в дверях солдатам и громким начальническим голосом крикнул им, чтобы они вводили лошадей. Окончив это дело, офицер молодецким жестом, высоко подняв локоть руки, расправил усы и дотронулся рукой до шляпы.
– Bonjour la compagnie! [Почтение всей компании!] – весело проговорил он, улыбаясь и оглядываясь вокруг себя. Никто ничего не отвечал.
– Vous etes le bourgeois? [Вы хозяин?] – обратился офицер к Герасиму.
Герасим испуганно вопросительно смотрел на офицера.
– Quartire, quartire, logement, – сказал офицер, сверху вниз, с снисходительной и добродушной улыбкой глядя на маленького человека. – Les Francais sont de bons enfants. Que diable! Voyons! Ne nous fachons pas, mon vieux, [Квартир, квартир… Французы добрые ребята. Черт возьми, не будем ссориться, дедушка.] – прибавил он, трепля по плечу испуганного и молчаливого Герасима.
– A ca! Dites donc, on ne parle donc pas francais dans cette boutique? [Что ж, неужели и тут никто не говорит по французски?] – прибавил он, оглядываясь кругом и встречаясь глазами с Пьером. Пьер отстранился от двери.
Офицер опять обратился к Герасиму. Он требовал, чтобы Герасим показал ему комнаты в доме.
– Барин нету – не понимай… моя ваш… – говорил Герасим, стараясь делать свои слова понятнее тем, что он их говорил навыворот.
Французский офицер, улыбаясь, развел руками перед носом Герасима, давая чувствовать, что и он не понимает его, и, прихрамывая, пошел к двери, у которой стоял Пьер. Пьер хотел отойти, чтобы скрыться от него, но в это самое время он увидал из отворившейся двери кухни высунувшегося Макара Алексеича с пистолетом в руках. С хитростью безумного Макар Алексеич оглядел француза и, приподняв пистолет, прицелился.
– На абордаж!!! – закричал пьяный, нажимая спуск пистолета. Французский офицер обернулся на крик, и в то же мгновенье Пьер бросился на пьяного. В то время как Пьер схватил и приподнял пистолет, Макар Алексеич попал, наконец, пальцем на спуск, и раздался оглушивший и обдавший всех пороховым дымом выстрел. Француз побледнел и бросился назад к двери.
Забывший свое намерение не открывать своего знания французского языка, Пьер, вырвав пистолет и бросив его, подбежал к офицеру и по французски заговорил с ним.
– Vous n'etes pas blesse? [Вы не ранены?] – сказал он.
– Je crois que non, – отвечал офицер, ощупывая себя, – mais je l'ai manque belle cette fois ci, – прибавил он, указывая на отбившуюся штукатурку в стене. – Quel est cet homme? [Кажется, нет… но на этот раз близко было. Кто этот человек?] – строго взглянув на Пьера, сказал офицер.
– Ah, je suis vraiment au desespoir de ce qui vient d'arriver, [Ах, я, право, в отчаянии от того, что случилось,] – быстро говорил Пьер, совершенно забыв свою роль. – C'est un fou, un malheureux qui ne savait pas ce qu'il faisait. [Это несчастный сумасшедший, который не знал, что делал.]
Офицер подошел к Макару Алексеичу и схватил его за ворот.
Макар Алексеич, распустив губы, как бы засыпая, качался, прислонившись к стене.
– Brigand, tu me la payeras, – сказал француз, отнимая руку.
– Nous autres nous sommes clements apres la victoire: mais nous ne pardonnons pas aux traitres, [Разбойник, ты мне поплатишься за это. Наш брат милосерд после победы, но мы не прощаем изменникам,] – прибавил он с мрачной торжественностью в лице и с красивым энергическим жестом.
Пьер продолжал по французски уговаривать офицера не взыскивать с этого пьяного, безумного человека. Француз молча слушал, не изменяя мрачного вида, и вдруг с улыбкой обратился к Пьеру. Он несколько секунд молча посмотрел на него. Красивое лицо его приняло трагически нежное выражение, и он протянул руку.
– Vous m'avez sauve la vie! Vous etes Francais, [Вы спасли мне жизнь. Вы француз,] – сказал он. Для француза вывод этот был несомненен. Совершить великое дело мог только француз, а спасение жизни его, m r Ramball'я capitaine du 13 me leger [мосье Рамбаля, капитана 13 го легкого полка] – было, без сомнения, самым великим делом.
Но как ни несомненен был этот вывод и основанное на нем убеждение офицера, Пьер счел нужным разочаровать его.
– Je suis Russe, [Я русский,] – быстро сказал Пьер.
– Ти ти ти, a d'autres, [рассказывайте это другим,] – сказал француз, махая пальцем себе перед носом и улыбаясь. – Tout a l'heure vous allez me conter tout ca, – сказал он. – Charme de rencontrer un compatriote. Eh bien! qu'allons nous faire de cet homme? [Сейчас вы мне все это расскажете. Очень приятно встретить соотечественника. Ну! что же нам делать с этим человеком?] – прибавил он, обращаясь к Пьеру, уже как к своему брату. Ежели бы даже Пьер не был француз, получив раз это высшее в свете наименование, не мог же он отречься от него, говорило выражение лица и тон французского офицера. На последний вопрос Пьер еще раз объяснил, кто был Макар Алексеич, объяснил, что пред самым их приходом этот пьяный, безумный человек утащил заряженный пистолет, который не успели отнять у него, и просил оставить его поступок без наказания.
Француз выставил грудь и сделал царский жест рукой.
– Vous m'avez sauve la vie. Vous etes Francais. Vous me demandez sa grace? Je vous l'accorde. Qu'on emmene cet homme, [Вы спасли мне жизнь. Вы француз. Вы хотите, чтоб я простил его? Я прощаю его. Увести этого человека,] – быстро и энергично проговорил французский офицер, взяв под руку произведенного им за спасение его жизни во французы Пьера, и пошел с ним в дом.
Солдаты, бывшие на дворе, услыхав выстрел, вошли в сени, спрашивая, что случилось, и изъявляя готовность наказать виновных; но офицер строго остановил их.
– On vous demandera quand on aura besoin de vous, [Когда будет нужно, вас позовут,] – сказал он. Солдаты вышли. Денщик, успевший между тем побывать в кухне, подошел к офицеру.
– Capitaine, ils ont de la soupe et du gigot de mouton dans la cuisine, – сказал он. – Faut il vous l'apporter? [Капитан у них в кухне есть суп и жареная баранина. Прикажете принести?]
– Oui, et le vin, [Да, и вино,] – сказал капитан.
Французский офицер вместе с Пьером вошли в дом. Пьер счел своим долгом опять уверить капитана, что он был не француз, и хотел уйти, но французский офицер и слышать не хотел об этом. Он был до такой степени учтив, любезен, добродушен и истинно благодарен за спасение своей жизни, что Пьер не имел духа отказать ему и присел вместе с ним в зале, в первой комнате, в которую они вошли. На утверждение Пьера, что он не француз, капитан, очевидно не понимая, как можно было отказываться от такого лестного звания, пожал плечами и сказал, что ежели он непременно хочет слыть за русского, то пускай это так будет, но что он, несмотря на то, все так же навеки связан с ним чувством благодарности за спасение жизни.
Ежели бы этот человек был одарен хоть сколько нибудь способностью понимать чувства других и догадывался бы об ощущениях Пьера, Пьер, вероятно, ушел бы от него; но оживленная непроницаемость этого человека ко всему тому, что не было он сам, победила Пьера.
– Francais ou prince russe incognito, [Француз или русский князь инкогнито,] – сказал француз, оглядев хотя и грязное, но тонкое белье Пьера и перстень на руке. – Je vous dois la vie je vous offre mon amitie. Un Francais n'oublie jamais ni une insulte ni un service. Je vous offre mon amitie. Je ne vous dis que ca. [Я обязан вам жизнью, и я предлагаю вам дружбу. Француз никогда не забывает ни оскорбления, ни услуги. Я предлагаю вам мою дружбу. Больше я ничего не говорю.]
В звуках голоса, в выражении лица, в жестах этого офицера было столько добродушия и благородства (во французском смысле), что Пьер, отвечая бессознательной улыбкой на улыбку француза, пожал протянутую руку.
– Capitaine Ramball du treizieme leger, decore pour l'affaire du Sept, [Капитан Рамбаль, тринадцатого легкого полка, кавалер Почетного легиона за дело седьмого сентября,] – отрекомендовался он с самодовольной, неудержимой улыбкой, которая морщила его губы под усами. – Voudrez vous bien me dire a present, a qui' j'ai l'honneur de parler aussi agreablement au lieu de rester a l'ambulance avec la balle de ce fou dans le corps. [Будете ли вы так добры сказать мне теперь, с кем я имею честь разговаривать так приятно, вместо того, чтобы быть на перевязочном пункте с пулей этого сумасшедшего в теле?]
Пьер отвечал, что не может сказать своего имени, и, покраснев, начал было, пытаясь выдумать имя, говорить о причинах, по которым он не может сказать этого, но француз поспешно перебил его.
– De grace, – сказал он. – Je comprends vos raisons, vous etes officier… officier superieur, peut etre. Vous avez porte les armes contre nous. Ce n'est pas mon affaire. Je vous dois la vie. Cela me suffit. Je suis tout a vous. Vous etes gentilhomme? [Полноте, пожалуйста. Я понимаю вас, вы офицер… штаб офицер, может быть. Вы служили против нас. Это не мое дело. Я обязан вам жизнью. Мне этого довольно, и я весь ваш. Вы дворянин?] – прибавил он с оттенком вопроса. Пьер наклонил голову. – Votre nom de bapteme, s'il vous plait? Je ne demande pas davantage. Monsieur Pierre, dites vous… Parfait. C'est tout ce que je desire savoir. [Ваше имя? я больше ничего не спрашиваю. Господин Пьер, вы сказали? Прекрасно. Это все, что мне нужно.]
Когда принесены были жареная баранина, яичница, самовар, водка и вино из русского погреба, которое с собой привезли французы, Рамбаль попросил Пьера принять участие в этом обеде и тотчас сам, жадно и быстро, как здоровый и голодный человек, принялся есть, быстро пережевывая своими сильными зубами, беспрестанно причмокивая и приговаривая excellent, exquis! [чудесно, превосходно!] Лицо его раскраснелось и покрылось потом. Пьер был голоден и с удовольствием принял участие в обеде. Морель, денщик, принес кастрюлю с теплой водой и поставил в нее бутылку красного вина. Кроме того, он принес бутылку с квасом, которую он для пробы взял в кухне. Напиток этот был уже известен французам и получил название. Они называли квас limonade de cochon (свиной лимонад), и Морель хвалил этот limonade de cochon, который он нашел в кухне. Но так как у капитана было вино, добытое при переходе через Москву, то он предоставил квас Морелю и взялся за бутылку бордо. Он завернул бутылку по горлышко в салфетку и налил себе и Пьеру вина. Утоленный голод и вино еще более оживили капитана, и он не переставая разговаривал во время обеда.
– Oui, mon cher monsieur Pierre, je vous dois une fiere chandelle de m'avoir sauve… de cet enrage… J'en ai assez, voyez vous, de balles dans le corps. En voila une (on показал на бок) a Wagram et de deux a Smolensk, – он показал шрам, который был на щеке. – Et cette jambe, comme vous voyez, qui ne veut pas marcher. C'est a la grande bataille du 7 a la Moskowa que j'ai recu ca. Sacre dieu, c'etait beau. Il fallait voir ca, c'etait un deluge de feu. Vous nous avez taille une rude besogne; vous pouvez vous en vanter, nom d'un petit bonhomme. Et, ma parole, malgre l'atoux que j'y ai gagne, je serais pret a recommencer. Je plains ceux qui n'ont pas vu ca. [Да, мой любезный господин Пьер, я обязан поставить за вас добрую свечку за то, что вы спасли меня от этого бешеного. С меня, видите ли, довольно тех пуль, которые у меня в теле. Вот одна под Ваграмом, другая под Смоленском. А эта нога, вы видите, которая не хочет двигаться. Это при большом сражении 7 го под Москвою. О! это было чудесно! Надо было видеть, это был потоп огня. Задали вы нам трудную работу, можете похвалиться. И ей богу, несмотря на этот козырь (он указал на крест), я был бы готов начать все снова. Жалею тех, которые не видали этого.]
