-
Standard W3C (SVG 1.0, září 2001)
-
Jazyk pro popis 2D grafiky a grafických aplikací v XML
-
Primárně práce s vektorovou grafikou
-
Lze vkládat i bitmapovou grafiku
-
Podpora animací (po propojení s jazykem SMIL, resp. pomocí JavaScriptu a DOM)
-
SMIL - Synchronized Multimedia Integration Language (http://www.w3.org/TR/2005/REC-SMIL2-20051213/)
-
XML jazyk pro psaní interaktivních multimediálních prezentací
-
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 9.0, SVG Export Plug-In -->
<!DOCTYPE svg [
<!ENTITY st0 "fill:#FFFFFF;stroke:none;">
<!ENTITY st1 "fill:#FFFFFF;stroke-width:6.6112;stroke-linecap:round;stroke-linejoin:round;">
<!ENTITY st2 "stroke:#FFFFFF;stroke-width:6.6112;">
<!ENTITY st3 "fill:none;stroke:none;">
<!ENTITY st4 "fill-rule:nonzero;clip-rule:nonzero;stroke:#000000;stroke-miterlimit:4;">
<!ENTITY st5 "stroke:none;">
]>
<svg width="48pt" height="48pt" viewBox="0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<g id="Layer_x0020_3" style="&st4;">
<g>
<path style="&st2;" d="M41.7,35.3L26.6,9.4c-0.6-1-1.7-1.7-2.9-1.6c-1.2,0-2.3,0.7-2.9,1.7L6.3,35.4c-0.6,1-0.6,2.3,0,3.3c0.6,1,1.7,1.6,2.9,1.6h29.6c1.2,0,2.3-0.6,2.9-1.7c0.6-1,0.6-2.3,0-3.3z"/>
<path style="&st1;" d="M23.7,11L9.2,37h29.6L23.7,11z"/>
<path style="&st0;" d="M23.7,11.9L10.3,36.1h27.5l-14-24.1z"/>
<g>
<path style="&st5;" d="M24.1,34c-1.1,0-1.8-0.8-1.8-1.8c0-1.1,0.7-1.8,1.8-1.8c1.1,0,1.8,0.7,1.8,1.8c0,1-0.7,1.8-1.8,1.8h0z M22.9,29.3l-0.4-9.1h3.2l-0.4,9.1h-2.3z"/>
</g>
</g>
</g>
<g id="crop_x0020_marks" style="&st4;">
<path style="&st3;" d="M48,48H0V0h48v48z"/>
</g>
</svg>
<svg xmlns="&ns_svg;"
xmlns:xlink="&ns_xlink;"
xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
width="320" height="200"
shape-rendering="optimizeSpeed"
onload="testAdobe();fade()">
<title>A16.3 - Fyzika - fáze 3</title>
<desc>
Realistické řízení rychlosti a zrychlení pomocí JavaScriptu vč. postupného zmenšování amplitudy kmitů.
</desc>
<script type="text/ecmascript">
<![CDATA[
function testAdobe() {
//created by Martin Hejral, 2003
//test if Adobe SVG Viewer 3 (ASV3) or greater is present -- only ASV3+ return "Adobe SVG Viewer"
//alert(navigator.appName+navigator.appVersion);
if(window.navigator)
if( (navigator.appName=="Adobe SVG Viewer") && (navigator.appVersion>="3.0") )
return true;
alert("PROSIM, nainstalujte novou verzi Adobe SVG Prohlizece!!! PLEASE, install latest version of the Adobe SVG Viewer!!!");
return false;
}
//global variables
var amp=50, scale=0.34, time=0, to=-1;
//perform fading animation
function fade() {
//get pointer to animated objects
var obj1 = document.getElementById('sphere1');
var obj2 = document.getElementById('spring1');
var s = y = Math.cos(time/1000);
//window.status="time = "+time/1000+" s";
//multiply COS t with amplitude
y *= amp;
//shift sphere to base position
y -= 50;
//scale spring
s *= scale;
//set base position
s += 0.34 + 0.32;
time += 50;
//amplitude and scale decay
amp = amp*999/1000;
scale = scale*999/1000;
//modify SVG graphics
obj1.setAttribute( "transform", "translate(0,"+y+")" );
obj2.setAttribute( "transform", "scale(1,"+s+")" );
//start timer
to = window.setTimeout("fade()", 50);
}
]]>
</script>
<defs>
<symbol id="spring">
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M16.3,3v9.9l9.1,2.4L7.1,20.2"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,20.2l18.3,4.9L7.1,30"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,30l18.3,4.9L7.1,39.8"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,39.8l18.3,4.9L7.1,49.5"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,49.5l18.3,4.9L7.1,59.3"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,59.3l18.3,4.9L7.1,69.1"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,69.1L25.4,74L7.1,78.9"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,78.9l18.3,4.9L7.1,88.7"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,88.7l18.3,4.9L7.1,98.5"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,98.5l18.3,4.9l-18.3,4.9"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,108.3l18.3,4.9L7.1,118"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,118l18.3,4.9l-18.3,4.9"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,127.8l18.3,4.9l-18.3,4.9"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,137.6l18.3,4.9l-9.1,2.4v16"/>
</symbol>
<symbol id="sphere">
<radialGradient id="XMLID_1_" cx="10.75" cy="162.811" r="23.0054" fx="10.75" fy="162.811" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
<a:midPointStop offset="0" style="stop-color:#FFFFFF"/>
<a:midPointStop offset="0.5" style="stop-color:#FFFFFF"/>
<a:midPointStop offset="1" style="stop-color:#000000"/>
</radialGradient>
<path fill="url(#XMLID_1_)" d="M32.5,168.6c0,9-7.3,16.3-16.3,16.3S0,177.5,0,168.6s7.3-16.3,16.3-16.3S32.5,159.6,32.5,168.6z"/>
</symbol>
<symbol id="fix_point">
<path fill="none" stroke="#000000" stroke-width="6" d="M8.3,3h16"/>
</symbol>
</defs>
<!-- symboly vlozime do obrazu -->
<use id="spring1" x="50" xlink:href="#spring">
</use>
<use id="sphere1" x="50" xlink:href="#sphere">
</use>
<use x="50" xlink:href="#fix_point">
</use>
<!-- obrys platna -->
<rect x="0" y="0" width="319" height="199"
fill="none" stroke="blue" />
</svg>
<xforms:model>
<xforms:instance>
<ecommerce xmlns="">
<method/>
<number/>
<expiry/>
</ecommerce>
</xforms:instance>
<xforms:submission action="http://example.com/submit" method="post" id="submit" includenamespaceprefixes=""/>
</xforms:model>
<select1 ref="method">
<label>Select Payment Method:</label>
<item>
<label>Cash</label>
<value>cash</value>
</item>
<item>
<label>Credit</label>
<value>cc</value>
</item>
</select1>
<input ref="number">
<label>Credit Card Number:</label>
</input>
<input ref="expiry">
<label>Expiration Date:</label>
</input>
<submit submission="submit">
<label>Submit</label>
</submit>
-
Vznikl přepisem HTML pomocí pravidel XML
-
uzavírání elementů
-
atributy v úvozovkách
-
...
-
-
Aktuální verze 2.0
-
Používaná verze 1.1
-
strict - dbá na oddělení dat od prezentační vrstvy, všechny formátovací atributy a elementy jsou zapovězené
-
formátování řešeno pomocí CSS
-
-
transitional - umožňuje použití formátovacích atributů a elementů
-
<?xml version="1.0" encoding="UTF-8"?> <vxml version="2.0" xmlns="http://www.w3.org/2001/vxml"> <form id="pizza-mixed"> <grammar src="pizza.grxml"/> <initial name="pizzaall"> <prompt>Welcome to FI pizzeria</prompt> <nomatch count="2"><assign name="pizzaall" expr="true"/></nomatch> <noinput count="2"><assign name="pizzaall" expr="true"/></noinput> </initial> <field name="kind"> <prompt>What kind of pizza do you want?</prompt> <nomatch>We have salami, mozzarela and appolo pizza</nomatch> <noinput>We have salami, mozzarela and appolo pizza</noinput> <grammar src="pizza.grxml#kind"/> </field> <field name="topping"> <prompt>What topping do you want?</prompt> <nomatch>We offer ketchup and chilli.</nomatch> <noinput>We offer ketchup and chilli.</noinput> <grammar src="pizza.grxml#topping"/> </field>
<field name="drink">
<prompt>What do you want to drink?</prompt>
<nomatch>Select one of coke, sprite and watter</nomatch>
<noinput>Select one of coke, sprite and watter</noinput>
<grammar src="pizza.grxml#drink"/>
</field>
<field name="ack">
<prompt>Did you ordered <value expr="kind"/> pizza with <value
expr="topping"/> and <value expr="drink"/>?</prompt>
<grammar src="yesno.grxml"/>
</field>
<filled>
<if cond="ack=='yes'">
<prompt>Order submited</prompt>
<else/>
<clear namelist="kind topping drink ack"/>
</if>
</filled>
</form>
</vxml>
<?xml version="1.0" encoding="UTF-8"?>
<grammar root="mixed" xml:lang="en_US">
<rule id="mixed">
<item><ruleref special="GARBAGE"/> <ruleref uri="#kind"/> pizza <ruleref special="GARBAGE"/> <ruleref uri="#topping"/> and <ruleref uri="#drink"/>
</item>
<tag>
{
$.kind=$kind;
$.topping=$topping;
$.drink=$drink;
}
</tag>
</rule>
<rule id="kind">
<one-of>
<item>salami</item>
<item>mozzarela</item>
<item>appolo</item>
</one-of>
</rule>
...
</grammar>