SVG: EJEMPLOS SIMPLES

svg01.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
 width="400" height="350" viewBox="0 0 400 350">
 <text x="108" y="160" style="font:italic 48pt Georgia">E x p o</text>
 <text x="108" y="230" style="font:italic 48pt Georgia">Vision</text>
 <!--circle cx="200" cy="175" r="120" fill="orange" opacity="0.5" /-->
 <!--rect x="90" y="100" rx="32" ry="64" width="225" height="150" fill="orange" opacity="0.5" /-->
</svg>
svg02.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
 width="400" height="400" viewBox="0 0 400 400">
<g transform="scale(0.2) translate(200,0) rotate(45)">
 <rect x="0" y="0" width="100" height="100" fill="white" />
 <rect x="100" y="0" width="100" height="100" fill="blue" />
 <rect x="0" y="100" width="100" height="100" fill="black" />
 <rect x="100" y="100" width="100" height="100" fill="#ddd" />
</g>
</svg>
delicious01.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
 width="400" height="400" viewBox="0 0 400 400">
<circle cx="200" cy="175" r="100" fill="red">
 <animateColor id="a1" attributeName="fill" values="black; blue; green; yellow"
   dur="2s" fill="freeze" />
 <animate id="a2" attributeName="r" attributeType="XML"
   begin="a1.end" from="100" to="170" dur="3s" fill="freeze" />
 <animate attributeName="opacity" attributeType="XML"
   begin="a2.end" from="1" to="0.3" dur="2s" fill="freeze" />
</circle>
<g opacity="0">
 <text x="66" y="185" style="font:bold italic 64pt Georgia">E x p o</text>
 <animate attributeName="opacity" attributeType="XML"
   begin="a2.end" from="0" to="1" dur="2s" fill="freeze" />
</g>
</svg>
delicious02.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
 width="150" height="150" viewBox="0 0 150 150">
<rect x="0" y="0" width="150" height="150" fill="orange" /> 
<g>
 <g id="icon">
  <rect x="25" y="25" width="50" height="50" fill="white" />
  <rect x="75" y="25" width="50" height="50" fill="blue" /> 
  <rect x="25" y="75" width="50" height="50" fill="black" />
  <rect x="75" y="75" width="50" height="50" fill="#ddd" />
 </g>
 <animateTransform attributeName="transform" attributeType="XML"
   type="rotate" from="0 75 75" to="360 75 75" dur="1s" repeatCount="3" additive="sum" fill="freeze"/>
</g>
</svg>
list-icon.html
<!DOCTYPE html> 
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery Mobile List Icons</title> 
    <link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" />  
    <script src="jquery-1.7.2.min.js"></script>
    <script src="jquery.mobile-1.1.0.min.js"></script>
    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
        <defs>
            <g id="delicious">
                <rect x="5" y="5" width="10" height="10" fill="white" />
                <rect x="15" y="5" width="10" height="10" fill="blue" />
                <rect x="5" y="15" width="10" height="10" fill="black" />
                <rect x="15" y="15" width="10" height="10" fill="#ddd" />
            </g>
        </defs>
    </svg>
</head>
<body> 
<div data-role="page" class="type-interior">
        <div data-role="header" data-theme="a">
        <h1>Icons</h1>
        <a href="index.html" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
        <a href="index.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div><!-- /header -->
 
<div data-role="content">
    <div class="content-primary">
        <ul data-role="listview" data-theme="b">
            <li><a href="index.html">
                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
                    <use x="0" y="0" xlink:href="#delicious">
                         <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 15 15" to="360 15 15" dur="1s" repeatCount="3" additive="sum" fill="freeze"/>
                    </use>
                </svg>
                &nbsp; France <span class="ui-li-count">4</span></a>
            </li>
            <li><a href="index.html">
                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
                    <use x="0" y="0" xlink:href="#delicious" />
                </svg>
                &nbsp; Germany <span class="ui-li-count">20</span></a>
            </li>
            <li><a href="index.html">
                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
                    <use x="0" y="0" xlink:href="#delicious" />
                </svg>
                &nbsp; Mexico <span class="ui-li-count">64</span></a>
            </li>
        </ul>
    </div><!--/content-primary -->		
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="d">
                <p>&copy; 2011-12 The jQuery Foundation</p>
</div>
</div><!-- /page -->
</body>
</html>
svg_-_ejemplos.txt · Última modificación: 2012/04/21 13:38 por apacheco
 
Excepto donde se indique lo contrario, el contenido de esta wiki se autoriza bajo la siguiente licencia: CC Attribution-Noncommercial-Share Alike 3.0 Unported
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki