svg
SVG export test
Quality comparing of export to SVG format in Adobe Illustrator CS4 and Inkscape.
This is a continuation. I've written in the first part about another applications. But it was written long ago that's why I didn't traslate it.
Test #5. Adobe Illustrator CS4
Save as SVG in AI CS4
As usual good job of Adobe's developers.
I was glad about changes in SVG export.
Смотрите сами. Вот как сохраняет AI в SVG все тот же прямоугольник с текстом:
Let's see how AI saves the rectangle with text:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="120px" height="170px" viewBox="0 0 120 170" enable-background="new 0 0 120 170" xml:space="preserve">
<g>
<rect x="8.435" y="37.12" fill="#FBB03B" stroke="#000000" width="98.913" height="50"/>
<text transform="matrix(1 0 0 1 35.0654 62.1191)" font-family="'MyriadPro-Regular'" font-size="12">Hello</text>
</g>
</svg>
Herewith there is a choice in savings formats:
SVG 1.0
SVG 1.1
SVG Tiny 1.1
SVG Tiny 1.1+
SVG Basic 1.1
SVG Tiny 1.2
All that you need you'll find in setting during saving.
Most ao all I liked two buttons - preview SVG code and preview in browser.
That's while you don't save yet you can see what would the result look like.
Test #6. Inkscape 0.46, built Apr 1 2008
Now let's get a look at export in Inkscape,
by default without special settings:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.0"
width="744.09448"
height="1052.3622"
id="svg2">
<defs
id="defs4" />
<g
id="layer1">
<g
id="g2676">
<rect
width="602.85712"
height="274.28571"
x="62.857143"
y="218.07646"
id="rect2383"
style="fill:#ff9955" />
<text
x="194.28572"
y="383.79074"
id="text2385"
xml:space="preserve"
style="font-size:72px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans"><tspan
x="194.28572"
y="383.79074"
id="tspan2387">Hello</tspan></text>
</g>
</g>
</svg>Size of this file is 972 bites - ink.svg
I could say that Inkscape was spicially designed for creating and editting SVG graphics. All is handy and clear here.
Also you'll find special XML editor here, that means code could be changes just in time/
SVG export test, продолжение
Сравниваем качество экспорта в SVG из Adobe Illustrator CS4 и Inkscape.
Это продолжение, первая часть, где я сравнивала различные варианты экспорта в SVG формат была написана уже давно. С тех пор уже несколько раз обновились основные программы для редактирования векторной графики.
Test #5. Adobe Illustrator CS4
Save as SVG in AI CS4
Adobe молодцы - как всегда очень порадовали изменения.
Смотрите сами. Вот как сохраняет AI в SVG все тот же прямоугольник с текстом:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="120px" height="170px" viewBox="0 0 120 170" enable-background="new 0 0 120 170" xml:space="preserve">
<g>
<rect x="8.435" y="37.12" fill="#FBB03B" stroke="#000000" width="98.913" height="50"/>
<text transform="matrix(1 0 0 1 35.0654 62.1191)" font-family="'MyriadPro-Regular'" font-size="12">Hello</text>
</g>
</svg>
При этом есть из чего выбрать, сохранять можно в следующих форматах:
SVG 1.0
SVG 1.1
SVG Tiny 1.1
SVG Tiny 1.1+
SVG Basic 1.1
SVG Tiny 1.2
В настройках при сохранении в формате SVG есть все необходимое,
больше всего мне понравились две кнопочки:
предпросмотр SVG кода и предпросмотр в браузере.
Т.е. пока вы еще не сохранили можно посмотреть как будет выглядеть результат.
Test #6. Inkscape 0.46, built Apr 1 2008
Теперь посмотрим как сохранит тоже самое Inkscape,
по умолчанию, без всяких настроек:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.0"
width="744.09448"
height="1052.3622"
id="svg2">
<defs
id="defs4" />
<g
id="layer1">
<g
id="g2676">
<rect
width="602.85712"
height="274.28571"
x="62.857143"
y="218.07646"
id="rect2383"
style="fill:#ff9955" />
<text
x="194.28572"
y="383.79074"
id="text2385"
xml:space="preserve"
style="font-size:72px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans"><tspan
x="194.28572"
y="383.79074"
id="tspan2387">Hello</tspan></text>
</g>
</g>
</svg>Размер этого файла 972 байта - ink.svg
Можно сказать, что Inkscape специально сделан для редактирования и создания SVG графики - все действительно удобно, просто и понятно.
Чем еще удобен Inkscape - так это наличием XML редактора, т.е. код сразу можно подправить.
SVG export test
Сравниваем качество экспорта в SVG из различных популярных программ.
Есть продолжение - AI CS4 и Inkscape.
SVG test
Задача - создать простой SVG рисунок, но так чтобы его можно было открыть не только Adobe SVG viewroм, но и структура полученного XML файла нашего рисунка была максимально простой - без лишних тегов, без лишней информации.
Попробуем воспользоваться экспортом из распростараненных графических пакетов - Adobe Illustrator, Corel Draw, Microsoft Visio, OpenOffice Draw. Тестовый рисунок - простой прямоугольник с текстом внутри (см. рисунок) и посмотрим что из этого получилось.
Test #1. Microsoft Visio 2003
Save as SVG in Visio
Рисуем в Microsoft Visio 2003 прямоугольник с текстом и сохраняем Save as... как SVG, в результате получаем следующую XMLку:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Generated by Microsoft Visio 11.0, SVG Export, v1.0 visio.svg Page-1 -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/"
width="8.26772in" height="11.6929in" viewBox="0 0 595.276 841.89"
xml:space="preserve" color-interpolation-filters="sRGB" class="st3">
<v:documentProperties v:langID="1033" v:viewMarkup="false"/>
<style type="text/css"><![CDATA[
.st1 {fill:#e8eef7;stroke:#000000;stroke-linecap:round;
stroke-linejoin:round;stroke-width:0.24}
.st2 {fill:#000000;font-family:Arial;font-size:1.00001em}
.st3 {fill:none;fill-rule:evenodd;font-size:12;overflow:visible;
stroke-linecap:square;stroke-miterlimit:3}
]]></style>
<g v:mID="0" v:index="1" v:groupContext="foregroundPage">
<v:userDefs>
<v:ud v:nameU="SchemeName" v:val="VT4(Default)"/>
</v:userDefs>
<title>Page-1</title>
<v:pageProperties
v:drawingScale="0.0393701"
v:pageScale="0.0393701"
v:drawingUnits="24"
v:shadowOffsetX="8.50394"
v:shadowOffsetY="-8.50394"/>
<v:layer v:name="Connector" v:index="0"/>
<g id="shape1-1"
v:mID="1" v:groupContext="shape"
transform="translate(28.3465,-723.543)">
<title>Rectangle</title>
<desc>Template</desc>
<v:userDefs>
<v:ud v:nameU="visVersion" v:val="VT0(11):26"/>
</v:userDefs>
<v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
<v:textRect cx="120.472" cy="799.724"
width="240.95" height="84.3307"/>
<rect x="0" y="757.559"
width="240.945" height="84.3307" class="st1"/>
<text x="95.46" y="803.32" class="st2"
v:langID="1033">
<v:paragraph v:horizAlign="1"/>
<v:tabList/>Template
</text>
</g>
</g>
</svg>
Вобщем-то неплохо, попробуем достать отсюда чистый svg (в соответствии со спецификацией 1,0) без дополнительных неймспейсов от Visio. Для этого преобразуем SVG следующими XSLT, которые удалят из нашего SVG все элементы и аттрибуты с namespasom Visio:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet
version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/">
<xsl:import xhref="copy.xslt" mce_href="copy.xslt"/>
<xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:strip-space elements="*"/>
<xsl:template match="@*">
<xsl:attribute name="{name()}" namespace="{namespace-uri( )}">
<xsl:value-of select="."/>
</xsl:attribute>
</xsl:template>
<xsl:template match="v:*" />
<xsl:template match="@v:*" />
</xsl:stylesheet>
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/ | node( ) | @*">
<xsl:copy>
<xsl:apply-templates select="@*"/>
<xsl:apply-templates/>
</xsl:copy>
</xsl:template>
</xsl:stylesheet>
Вот результат:
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated by Microsoft Visio 11.0, SVG Export, v1.0 visio.svg Page-1 -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/"
width="8.26772in" height="11.6929in"
viewBox="0 0 595.276 841.89" xml:space="preserve"
color-interpolation-filters="sRGB" class="st3">
<style type="text/css">
.st1 {fill:#e8eef7;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
.st2 {fill:#000000;font-family:Arial;font-size:1.00001em}
.st3 {fill:none;fill-rule:evenodd;font-size:12;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}
</style>
<g>
<title>Page-1</title>
<g id="shape1-1" transform="translate(28.3465,-723.543)">
<title>Rectangle</title>
<desc>Template</desc>
<rect x="0" y="757.559"
width="240.945" height="84.3307" class="st1"/>
<text x="95.46" y="803.32"
class="st2">Template</text>
</g>
</g>
</svg>
Результат при просмотре в IE ничем не отичается от SVG без преобразования.
Test #2. OpenOffice 2.0 beta
OpenOffice Draw
OpenOffice Draw это бесплатный аналог Microsoft Visio, занимает меньше места на диске и быстрее, чем Visio. OpenOffice Draw экспортирует в SVG формат при этом не предлагая никаких настроек для экпорта пользователю.
Вот что у него получиться с аналогичным прямоугольником с текстом:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 21000 29700"
preserveAspectRatio="xMidYMid"
fill-rule="evenodd">
<defs>
<font id="EmbeddedFont_1" horiz-adv-x="2048">
<font-face font-family="Arial embedded"
units-per-em="2048"
ascent="1852" descent="450"/>
<missing-glyph horiz-adv-x="2048">
<path style="fill:none;stroke:black;stroke-width:33"
d="M 0,2048 L 2047,2048 2047,1 0,1 0,2048 Z"/>
</missing-glyph>
<glyph unicode="T" horiz-adv-x="1112">
<path
d="M 531,0 L 531,1293 48,1293 48,1466 1210,1466 1210,1293 725,1293 725,0 531,0 Z"/>
</glyph>
<glyph unicode="a" horiz-adv-x="954">
<path d="M 828,131 C 761,74 697,34 636,11 574,-11 508,
-23 437,-24 320,-23 231,5 168,62 105,119 74,
191 74,280 74,332 86,380 110,423 133,466 164,500 203,526 241,
552 284,572 332,585 367,594 421,603 492,
612 637,629 744,650 813,674 814,699 814,714 814,721 814,794 797,
846 763,876 717,917 649,937 558,937 473,
937 411,922 371,893 330,863 300,810 281,735 L 105,759 C 121,
834 147,895 184,942 221,988 274,1024 343,
1049 412,1074 493,1086 584,1086 675,1086 748,1075 805,1054 862,
1033 903,1006 930,974 957,941 975,
900 986,851 992,820 995,765 995,685 L 995,445 C 995,278 999,
172 1007,128 1014,83 1029,41 1052,0 L 864,
0 C 845,37 833,81 828,131 Z M 813,533 C 748,506 650,484 519,
465 445,454 393,442 362,429 331,416 308,
396 291,371 274,345 266,316 266,285 266,237 284,197 321,165 357,
133 410,117 480,117 549,117 611,
132 665,163 719,193 759,234 784,287 803,328 813,388 813, 467 L 813,533 Z"/>
</glyph>
<glyph unicode="e" horiz-adv-x="954">
<path d="M 862,342 L 1048,319 C 1019,
210 964,126 885,66 806,6 704,-23 581,-24 426,-23 303,24 212,
120 121,215 75,349 75,522 75,701 121,
839 213,938 305,1037 424,1086 571,1086 713,1086 829,1038 919,
941 1009,844 1054,708 1054,533 1054,
522 1054,506 1053,485 L 261,485 C 268,368 301,279 360,217 419,
155 493,124 582,124 648,124 704,
141 751,176 798,211 835,266 862,342 Z M 271,633 L 864,633 C 856,
722 833,789 796,834 739,903 664, 938 573,938 490,938 421,910 365,855 308,800 277,726 271,633 Z"/>
</glyph>
<glyph unicode="l" horiz-adv-x="160">
<path d="M 131,0 L 131,1466 311,1466 311,0 131,0 Z"/>
</glyph>
<glyph unicode="m" horiz-adv-x="1430">
<path d="M 135,0 L 135,1062 296,1062 296,913 C 329,
965 374,1007 429,1039 484,1070 547,1086 618,1086 697,1086 761,
1070 812,1037 862,1004 897,959 918,900 1002,
1024 1111,1086 1246,1086 1351,1086 1432,1057 1489,999 1546,
940 1574,850 1574,729 L 1574,0 1395,0 1395,
669 C 1395,741 1389,793 1378,825 1366,856 1345,882 1314,901 1283,
920 1247,930 1206,930 1131,930 1069,
905 1020,856 971,806 946,726 946,617 L 946,0 766,0 766,690 C 766,
770 751,830 722,870 693,910 645,930 578,
930 527,930 481,917 438,890 395,863 363,824 344,773 325,722 315, 648 315,551 L 315,0 135,0 Z"/>
</glyph>
<glyph unicode="p" horiz-adv-x="901">
<path d="M 135,-407 L 135,1062 299,1062 299,
924 C 338,978 381,1019 430,1046 479,1073 538,1086 607,1086 698,
1086 778,1063 847,1016 916,969 969,
904 1004,819 1039,734 1057,640 1057,539 1057,430 1038,333 999,
246 960,159 903,92 829,46 754,0 676,
-23 594,-24 534,-23 480,-10 433,14 385,39 346,71 315,110 L 315,
-407 135,-407 Z M 298,525 C 298,388 326,
287 381,222 436,157 503,124 582,124 662,124 731,158 788,226 845,
293 873,398 873,540 873,675 845,777 790,
844 734,911 667,945 590,945 513,945 446,909 387,838 328, 766 298,662 298,525 Z"/>
</glyph>
<glyph unicode="t" horiz-adv-x="504">
<path d="M 528,161 L 554,2 C 503,-8 458,-13 418,
-14 353,-13 302,-3 266,17 230,38 205,65 190,99 175,132 168,203 168,
311 L 168,922 36,922 36,1062 168,1062 168,
1325 347,1433 347,1062 528,1062 528,922 347,922 347,301 C 347,
250 350,217 357,202 363,187 373,176 388,167 402, 158 422,154 449,154 469,154 495,156 528,161 Z"/>
</glyph>
</font>
</defs>
<g visibility="visible" id="Default">
<desc>Master slide</desc>
</g>
<g visibility="visible" id="page1">
<desc>Slide</desc>
<g>
<desc>Drawing</desc>
<g>
<g style="stroke:none;fill:rgb(153,204,255)">
<path d="M 1550,1635 L 11550,1635 11550,5135 1550, 5135 1550,1635 Z"/>
</g>
<g style="stroke:rgb(0,0,0);fill:none">
<path style="fill:none"
d="M 6550,5135 L 1550,5135 1550,1635 11550, 1635 11550,5135 6550,5135"/>
</g>
<g>
<g
style="font-family:Arial embedded; font-size:423;font-weight:400">
<g style="stroke:none;fill:rgb(0,0,0)">
<text>
<tspan x="5651 5913 6151 6506 6743 6836 7073 7192 "
y="3524">Template</tspan>
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Test #3. Adobe Illustrator CS
Adobe Illustrator CS
Adobe Illustrator - очень удобный редактор векторной графики, начиная с 9-й версии умеет делать SVG. В версии CS рисуем прямоугольник с текстом и через меню Save as... сохраняем в SVG формате, что приятно AI предлагает хороший набор настроек сохранения в нашем формате, в том числе выбор из трех кодировок, оптимизация под Adobe Viewer, тип встраивания шрифтов и еще немного других полезных настроек.
А вот соббственно результат сохранения с самыми простыми настройками:
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 11.0, SVG Export Plug-In . SVG Version: 6.0.0 Build 78) -->
<!DOCTYPE svg PUBLIC "//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
<!ENTITY ns_svg "http://www.w3.org/2000/svg">
<!ENTITY ns_xlink "http://www.w3.org/1999/xlink">
]>
<svg xmlns="&ns_svg;"
xmlns:xlink="&ns_xlink;"
xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
width="297.591" height="97.591"
viewBox="0 0 297.591 97.591"
style="overflow:visible;enable-background:new 0 0 297.591 97.591"
xml:space="preserve">
<metadata>
<?xpacket begin='?' id='W5M0MpCehiHzreSzNTczkc9d'?>
<x:xmpmeta xmlns:x="adobe:ns:meta/"
x:xmptk="XMP toolkit 3.0-29, framework 1.6">
<rdf:RDF
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:iX="http://ns.adobe.com/iX/1.0/">
<rdf:Description
rdf:about=""
xmlns:pdf="http://ns.adobe.com/pdf/1.3/">
</rdf:Description>
<rdf:Description
rdf:about=""
xmlns:tiff="http://ns.adobe.com/tiff/1.0/">
</rdf:Description>
<rdf:Description
rdf:about=""
xmlns:xap="http://ns.adobe.com/xap/1.0/"
xmlns:xapGImg="http://ns.adobe.com/xap/1.0/g/img/">
<xap:CreateDate>2005-08-19T13:46:57Z</xap:CreateDate>
<xap:ModifyDate>2005-08-19T13:46:57Z</xap:ModifyDate>
<xap:CreatorTool>Illustrator</xap:CreatorTool>
<xap:Thumbnails>
<rdf:Alt>
<rdf:li
rdf:parseType="Resource">
<xapGImg:format>JPEG</xapGImg:format>
<xapGImg:width>256</xapGImg:width>
<xapGImg:height>84</xapGImg:height>
<xapGImg:image>/9j/4AAQSkZJRgABAgEASABIAAD/7QAsUGhvdG9zaG9wIDMuMAA4QklNA+0AAAAA
ABAASAAAAAEA
AQBIAAAAAQAB/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoK
DBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8f
Hx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgAVAEAAwER
AAIRAQMRAf/EAaIAAAAHAQEBAQEAAAAAAAAAAAQFAwIGAQAHCAkKCwEAAgIDAQEBAQEAAAAAAAAA
AQACAwQFBgcICQoLEAACAQMDAgQCBgcDBAIGAnMBAgMRBAAFIRIxQVEGE2EicYEUMpGhBxWxQiPB
UtHhMxZi8CRygvElQzRTkqKyY3PCNUQnk6OzNhdUZHTD0uIIJoMJChgZhJRFRqS0VtNVKBry4/PE
1OT0ZXWFlaW1xdXl9WZ2hpamtsbW5vY3R1dnd4eXp7fH1+f3OEhYaHiImKi4yNjo+Ck5SVlpeYmZ
qbnJ2en5KjpKWmp6ipqqusra6voRAAICAQIDBQUEBQYECAMDbQEAAhEDBCESMUEFURNhIgZxgZEy
obHwFMHR4SNCFVJicvEzJDRDghaSUyWiY7LCB3PSNeJEgxdUkwgJChgZJjZFGidkdFU38qOzwygp
0+PzhJSktMTU5PRldYWVpbXF1eX1RlZmdoaWprbG1ub2R1dnd4eXp7fH1+f3OEhYaHiImKi4yNjo
+DlJWWl5iZmpucnZ6fkqOkpaanqKmqq6ytrq+v/aAAwDAQACEQMRAD8A6D5N8m+UJvKGhyy6Hp8k
smn2rySPawMzM0CEkkpUknMqMRTSSnH+B/Jf/Vg03/pEg/5ow8IRZd/gfyX/ANWDTf8ApEg/5ox4
Qtl3+B/Jf/Vg03/pEg/5ox4Qtl3+B/Jf/Vg03/pEg/5ox4Qtl3+B/Jf/AFYNN/6RIP8AmjHhC2Xf
4H8l/wDVg03/AKRIP+aMeELZd/gfyX/1YNN/6RIP+aMeELZd/gfyX/1YNN/6RIP+aMeELZd/gfyX
/wBWDTf+kSD/AJox4Qtl3+B/Jf8A1YNN/wCkSD/mjHhC2Xf4H8l/9WDTf+kSD/mjHhC2Xf4H8l/9
WDTf+kSD/mjHhC2Xf4H8l/8AVg03/pEg/wCaMeELZd/gfyX/ANWDTf8ApEg/5ox4Qtl3+B/Jf/Vg
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</xapGImg:image>
</rdf:li>
</rdf:Alt>
</xap:Thumbnails>
</rdf:Description>
<rdf:Description
rdf:about=""
xmlns:dc="http://purl.org/dc/elements/1.1/">
<dc:format>image/svg+xml</dc:format>
</rdf:Description>
</rdf:RDF>
</x:xmpmeta>
<?xpacket end='w'?>
</metadata>
<g id="Layer_1">
<rect x="0.5" y="0.5"
style="fill:#CED8EA;stroke:#000000;"
width="296.591" height="96.591"/>
<text transform="matrix(1 0 0 1 121.5225 53.3418)">
<tspan x="0" y="0"
style="font-family:'ArialMT'; font-size:12; letter-spacing:-1;">T</tspan>
<tspan x="6" y="0"
style="font-family:'ArialMT'; font-size:12;">emplat</tspan>
<tspan x="42.018" y="0"
style="font-family:'ArialMT'; font-size:12; letter-spacing:1;">e</tspan>
</text>
</g>
</svg>
Test #4. Corel Draw
Corel Draw 11
Corel Draw - отличный графический редактор для верстки многостраничных буклетов, для визиток, для векторной графики вообще. При сохранении в SVG формате Corel Draw также предлагает ряд настроек.
Вот так Corel Draw сохранит простой прямоугольник с текстом:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:odm="http://product.corel.com/CGS/11/cddns/"
xml:space="preserve"
width="8.26772in" height="11.6929in"
style="shape-rendering:geometricPrecision;
text-rendering:geometricPrecision;
image-rendering:optimizeQuality; fill-rule:evenodd"
viewBox="0 0 8268 11692">
<defs>
<style type="text/css">
<![CDATA[
.str0 {stroke:#1F1A17;stroke-width:3}
.fil1 {fill:#1F1A17}
.fil0 {fill:#E1EDF9}
.fnt0 {font-weight:normal;font-size:167;font-family:Arial}
]]>
</style>
</defs>
<g id="Layer 1">
<rect class="fil0 str0" x="392" y="568"
width="2439" height="938"/>
<text x="1151" y="1076" class="fil1 fnt0">Template</text>
</g>
</svg>
На мой взгляд это лучший результат из всех приведенных здесь тестов. Результат, с которым можно работать, на его основе легко создавать SVG программно, например, с помощью XSLT трансформации.
Это был пример, созданный с помощью CorelDraw 11 версии. Этот пример в браузерах Mozilla FF 1.5.0.6 и Opera 9.01 работает некорректно: текст в прямоугольнике не показывается. В чем проблема при беглом рассмотрении мне выяснить не удалось.
Однако я проверила экспорт из новой версии CorelDraw X3 (13 версия):
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg"
xml:space="preserve" width="210mm" height="297mm"
style="shape-rendering:geometricPrecision;
text-rendering:geometricPrecision; image-rendering:optimizeQuality;
fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 210 297"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
.str0 {stroke:#1F1A17;stroke-width:0.0762}
.fil1 {fill:#1F1A17}
.fil0 {fill:#00CCFF}
.fnt0 {font-weight:normal;font-size:8.4667;font-family:'Arial'}
]]>
</style>
</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<rect class="fil0 str0" x="43.5939" y="40.0005"
width="87.2613" height="36.0126"/>
<text x="67.9143" y="61.2387" class="fil1 fnt0">Template</text>
</g>
</svg>
Все работает и в Mozille FF и в Opera, но надо иметь в виду, что текст, не переведенный в кривые, выглядит в браузере (SVG) по-другому, отличаясь довольно существенно от оригинала, который мы наблюдаем в CorelDraw.
А вот настройки, которые предлагает CorelDraw при сохранении в SVG:
AutoCAD to SVG
Как сохранить чертежи программы AutoCAD в формате SVG
AutoCAD является одной из самых популярных систем автоматизирорванного проектирования.
Начиная с 2000-й версии в AutoCADe появилась возможность экспорта чертежа в специальный векторный формат DWF. Для просмотра электронных чертежей DWF служит разработанная фирмой программа Autodesk Express Viewer (бесплатнно ею распространяемая). Эта программа также используется как плагин для просмотра DWF файлов в браузере. Здесь же мы рассмотрим способ представления чертежей AutoCAD в формат SVG. В программе AutoCAD 2005 не предусмотрена возможность экспорта чертежей в формат SVG. При необходимости опубликовать в web чертежи AutoCADa один из возможных и наиболее удобный способ это сделать - это использование Adobe Illustrator CS (AI)
Возможности Adobe Illustrator
| версия: | 11 |
| платформы: | Windows |
| лицензия: | commercial product |
| разработчик: | Adobe |
| свежесть: | 2004 |
- плагин для просмотра SVG графики в браузере
| версия: | 3.01 |
| платформы: | windows |
| лицензия: | free |
| разработчик: | Adobe |
| свежесть: | сент. 2003 |
Начиная с версии 9.0 Adobe Illustrator полностью поддерживает формат SVG, в том числе:
- сохраняет графические данные в SVG формате (.svg, .svgz)
- оптимизирует SVG под Adobe SVG Viewer
- при экспорте в SVG конвертирует слои (layers) в группы (элементы ), названия слоев в идентификаторы групп
- позволяет добавлять и ассоцировать JavaScript код с элементами SVG (имеет специальную палитру SVG Interactivity Palette)
- позволяет создавать гиперссылки для SVG элементов
Детально возможности и проблемы создания SVG документов с помощью AI описаны в документе Adobe Using SVG with Adobe® Illustrator® 9.0
Кроме того, Adobe Illustrator CS поддерживает импорт и экспорт в форматы AutoCADa DWG и DXF. Если повезет AI может также удачно импортировать файл DWG, при этом группы и имена групп определенные в AutoCAD сохранятся и в AI в виде слоев. От чего зависит удача в данном случае неизвестно, что известно точно - файлы в формате AutoCAD 2005 (как и 2004) Illustrator не открывает (unknown format and cannot be open). Чертежи, созданные в AutoCAD 2004 или 2005 можно сохранить в формате AutoCAD 2000/LT2000 Drawing, естественно могут быть некоторые потери, но зато этот формат AI чаще всего понимает вполне нормально.
Итак, если удалось открыть в AI файл AutoCADa DWG (или DXF) можно считать, что проблема конвертации из AutoCAD в SVG решена. AI сохраняет информацию о сгруппированных объектах чертежа, т.е. все группы объектов и их имена, которые были определены в AutoCADе в АI будут выглядеть в виде слоев и их имен соответственно, и следовательно сохраняться и в SVG формате.
Пример
Возьмем в качестве тестового примера чертеж из дистрибутива AutoCAD 2005 - 8th floor furniture.dwg:
Так выглядит чертеж 8th floor furniture.dwg в AutoCAD 2005:
Этот же чертеж (8th floor furniture.dwg), открытый в Adobe Illustrator:
Этот же чертеж, сохраненный Illustaratorом в формате SVG:
8th floor furniture.svg (размером 3.5 Мб)
AI может сохранять и в формате SVGZ (сжатый SVG):
8th floor furniture.svgz (размером 761 Kб)
На чертеже 8th floor furniture.dwg серым цветом обозначены данные, хранящиеся в файле 8th floor plan.dwg, поэтому естественно при открытии чертежа в AI данных из другого файла нет. Мы сохранили чертеж 8th floor plan.dwg в формате AutoCAD 2000/LT2000 Drawing и перенесли к уже открытому в AI 8th floor furniture:
в результате получили SVG размером 945Кб (svgz), Проблема в том, что Adobe SVG viewer SVG такого размера обрабатывает уже струдом.
Если с открытием файла DWG в AI возникли какие-то проблемы, можно выделить все кривые в AutoCADe и скопировать их в буфер обмена windows, после чего их можно вставить в документ AI. Цвета всех кривых при этом сохраняться, но объекты придеться объединять в группы вручную.
Альтернативы
В качестве альтернативы предложенному способу конвертации чертежей из AutoCAD в SVG можно использовать существующий бесплатный конвертер gsDXF2SVG (реализованный в виде ActiveX DLL) фирмы Gardos Software
Скачать дистрибутив gsDXF2SVG можно
с сайта Gardos Software: http://business.hol.gr/gardos/download.htm
Это простой и поэтому достаточно удобный в использовании конвертер, создает по сравнению с AI небольшой по размеру SVG,
- но
- удачно справляется далеко не совсеми чертежами,
- чертеж с ссылками на другой файл (как например, в 8th floor furniture.dwg, см. выше) не конвертирует вообще,
- и самый главный его недостаток - конвертер не сохраняет информацию о сгруппированных объектах.
Существует также платные конвертеры для SVG, проверить которые у меня не было возможности. Cписок программного обеспечения для SVG можно найти на оффициальном сайте SVG консорциума W3C или здесь: SVG Implementations.
Аналогично AI работает с SVG и DWG графический пакет Corel Draw, с одной лишь разницей - сохраняет Corel SVG в формате понятном Corel SVG Viewer, что не обязательно гарантирует того, что этот файл откроет Adobe SVG Viewer.
SVG
Коротко об XML-ном графическом формате Scalable Vector Graphics
Что такое SVG? Замена Flash? Совсем нет. Это графика для тех, кому нужна графика в формате XML - векторная, интерактивная и масштабируемая, поддерживаемая основными браузерами (правда, каждый браузер, поддерживает SVG по-своему) и даже PDF.
Зачем? для графического представления XML данных (для ваших данных вы просто пишете XSLT и преобразовываете XML в SVG, т.е. в картинку)
А еще можно искать внутри картинки! Так как текст в SVG - это действительно текст, а не изображение.
И настраивать внешний вид, например диаграмм, с помощью CSS.
Что такое SVG
Элементарный SVG
SVG (Scalable Vector Graphics, в переводе масшатбируемая векторная графика) - это язык для описания двухмерной графики в XML. SVG предусматривает три типа графических объектов:
- изображения (растрорвая графика)
- текст
SVG принят в качестве рекомендации консорциумом W3C 14 января 2003 Спецификацию SVG 1.1 можно найти на сайте w3c: Scalable Vector Graphics (SVG) 1.1 Specification
Пример svg-кода:
<?xml version="1.0"?>
<svg width="175" height="145" >
<g style="stroke:black; fill:red" >
<polygon points=" 5, 50, 5, 81, 12, 64" />
<polygon points=" 5, 45, 41,116, 41, 73" />
<polygon points=" 44, 76, 44,119, 61,115" />
<polygon points=" 46, 73, 75,140,105, 73" />
</g>
<g stroke="black" fill="black">
<polygon points="107, 76,106,119, 89,115" />
<polygon points="144, 45,109,116,109, 73" />
<polygon points="145, 41,167, 4,109, 71" />
<polygon points=" 66, 72, 75, 63, 84, 72" />
</g>
</svg>
это простое изображение журавлика - см. справа на картинке.
Возможности SVG
SVG с анимацией
Графические объекты могут быть сгруппированы, трансформированы, для них может быть определен стиль. SVG графика может быть интерактивной и динамической. Анимация может быть как декларативной (т.е. встроенные элементы SVG анимации в SVG контент), так и определенной с помощью скрипта.
- Что еще может SVG?
-
Поддержка прозрачности
-
Мягкие градиенты
-
Сглаженный текст
-
Специальные эффекты как в Photoshope (используются фильтры)
-
Точно определенное размещение объектов в пикселах
-
Анимация и скрипт
-
Применение стилей (CSS)
-
Встраиваемая растровая графика, символы и Font Glyphs
SVG - это формат для двухмерной векторной графики - так определено в спецификации, но с помощью добавления скрипта (а именно JavaScript) внутрь SVG файла можно создавать трехмерные анимированные изображения, вот пример трехмерного SVG:3D.svg, созданного с помощью Batik SVG Toolkit.
В SVG может быть встроено растровое изображение, к которому как и к любому другому объекту в SVG может быть применена трансформация, прозрачность и т.д.
Если важен размер изображения, SVG могут быть сохранены с помощью gzip компрессии (расширение SVGZ). Так как SVG - это XML, сжатые SVG могут становиться существенно меньше.
Поддержка SVG браузерами и другими приложениями
SVG и PDF
PDF документ со встроенной внутрь интерактивной SVG графикой, поддерживается Adobe Acrobat Pro и Adobe Reader (начиная с 6-й версии).
Использование SVG в веб находится сейчас на стадии младенчества. На сайтах, где используется SVG, обычно изображения автоматически преобразуются в растровый формат с помощью такой библиотеки как, например, ImageMagick (язык C) - быстрая, но не полностью поддерживающая SVG или такой как Batik (java), которая обеспечивает практически полную поддержку SVG, но медленнее.
Для просмотра SVG существуют как самостоятельные (stand-along) SVG просмотрщики, так и плагины для браузеров. Самым распространенным сейчас, пожалуй, является плагин для браузеров Adobe SVG Viewer, который можно бесплатно скачать с сайта Adobe (был выпущен в сентябре 2003 года и с тех пор не обновлялся)
Существует также плагин от Corel: Corel SVG Viewer. Но очень часто SVG, которые может показывать Adobe Viewer, не воспроизводятся Corel SVG Viewer и наоборот.
Что касается браузеров - без дополнительных плагинов SVG могут показывать Mozilla и Opera c 8-й версии. Для этого SVG графика может быть встроена непосредственно в разметку HTML, т.к. является XML форматом.
Во всех остальных браузерах необходима установка соответствующего плагина и SVG включается в разметку из внешнего файла с помощью тега embed, например <embed xsrc="graph.svgz" mce_src="graph.svgz" width="625.5" height="393" type="image/svg+xml">
SVG также может быть встроен в PDF документ. Adobe Acrobat Reader поддерживает SVG начиная с 6-й версии. Для встраивания SVG в PDF существует плагин для Adobe Acrobat Pro.
Для мобильных устройств, телефонов и PDA, также существует поддержка SVG. Специально для них были разработаны варианты SVG формата: SVG Tiny (SVGT) and SVG Basic (SVGB). Кроме того, конкурент SVG - Macromedia Flash Lite частично поддерживает SVG Tiny начиная с версии 1.1.
На сайте w3c можно найти официальный список программного обеспечения для SVG.
Как создавать и редактировать SVG
SVG и 3D
Основной инструмент редактирования SVG - обычный текстовый редактор, например, замечательный UltraEdit, так как SVG является подмножеством XML и представляет собой обыкновенный текстовый документ с разметкой, аналогично документу HTML.
Возможно автоматизированное создание SVG на основе XML данных с помощью преобразования XSLT.
Для визуального редактирования (рисования) SVG подойдет Adobe Illustrator версии не ниже 9.0, его преимущество в том, что он не боится больших объемов. С помощью Illustratora можно создавать и редактировать сложные SVG большого размера, добавляя необходимый скрипт с помощью специальной палитры Illustratora - SVG interactivity pallete. Однако AI экспортирует SVG с большим колличеством лишнего кода, якобы оптимизируя SVG под Adobe SVG Viewer.
Cуществует также несколько самостоятельных SVG редакторов как платных, так и бесплатных, которые позволяют визуально редактировать картинку, добавлять анимацию и интерактивность, а также вручную писать необходимый скрипт.
В некоторых графических пакетах, например Corel Draw, как и в Adobe Illustrator включена возможность экспорта графики в SVG.
К сожалению, ни одного качественного приложения, которое бы обеспечивало возможность простого быстрого визуального создания динамических и интерактивных SVG (так как, например, в Macromedia Flash) я не нашла.
На Java существует открытая (бесплатная) библиотека Batik SVG Toolkit для генерации, отображения и манипулирования SVG графикой. Библиотека практически полностью поддерживает формат SVG 1.1.
Почему SVG? 10 причин
Еще один интересный пример SVG
-
Легко редактирвать - SVG - это простой текст в легкочитаемом XML и CSS формате;
-
Контент, в котором можно искать - внутри графики можно осуществлять поиск, в том числе и с помощью поисковых машин;
-
Локализация - легко переводить графический текст на различные языки;
-
Открытый стандарт;
-
Растровые эффекты для векторной графики - применимы real-time эффекты как в photoshope (тень, прожектор, размытие, выдавливание...);
-
Обработка данных - создание графики на лету с помощью скриптов;
-
Богатые возможности работы с текстом - встраивание шрифтов или выбранного символа;
-
Точно определенное размещение объектов в пикселах;
-
Error Handling - используется "zero-tolerance" XML; может указываться номер строки и колонки для SVG ошибок.
- Чем Flash лучше?
-
Больше подходит для анимации (существует удобный инструмент для создания анимации во Flash);
-
Плагин для браузера установлен почти у всех пользователей Windows;
-
ActiveX плагин для браузера менее 400КБ (Adobe SVG Viewer около 2.3 МБ);
-
Популярность Flash у дизайнеров и наличие нескольких удобных инструментов для создания Flash-роликов.
Применение SVG
SVG слайд-шоу
-
Простые, масштабируемые иллюстрации
-
Карты
-
Финансовые, и не только, диаграммы
-
Проектные и технические схемы
-
Анимация
-
Обмен, пересылка данных
-
Презентации в виде слайд-шоу
Вот еще несколько, пожалуй самых интересных примеров SVG графики - и опять от Adobe:
Интерактивные диаграммы
CML, XSL, JavaScript and SVG
