home *** CD-ROM | disk | FTP | other *** search
/ PC World 2001 April / PCWorld_2001-04_cd.bin / Komunik / Amaya / WinNT2000 / amaya-WindowsNT-4.3.exe / _SETUP.1 / SVG.html < prev    next >
Encoding:
Extensible Markup Language  |  2001-02-22  |  9.0 KB  |  213 lines
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.   <title>Editing Graphics</title>
  5.   <meta name="GENERATOR" content="amaya V4.2.2" />
  6.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7. </head>
  8.  
  9. <body xml:lang="en" lang="en">
  10.  
  11. <table width="100%" summary="toc">
  12.   <tbody>
  13.     <tr>
  14.       <td><img border="0" src="../../Icons/WWW/w3c_home" /><img border="0"
  15.         alt="Amaya" src="../Icons/amaya.gif" /></td>
  16.       <td><p align="right"><a href="Math.html" accesskey="p"><img
  17.         alt="previous" border="0" src="../Icons/left.gif" /></a> <a
  18.         href="Manual.html" accesskey="t"><img alt="top" border="0"
  19.         src="../Icons/up.gif" /></a> <a href="ImageMaps.html"
  20.         accesskey="n"><img border="0" src="../Icons/right.gif" /></a></p>
  21.       </td>
  22.     </tr>
  23.   </tbody>
  24. </table>
  25.  
  26. <div id="Editing">
  27. <h2>Editing graphics</h2>
  28.  
  29. <p>Amaya allows you to include vector graphics in Web pages, following the
  30. Scalable Vector Graphics (<a href="http://www.w3.org/TR/svg/">SVG</a>)
  31. specification. SVG elements are handled as structured components, in the same
  32. way as HTML elements. Therefore, you can manipulate SVG graphics in the same
  33. way you manipulate other parts of HTML documents. All editing commands
  34. provided by Amaya for handling text are also available for graphics. There are
  35. also some additional controls for entering SVG elements.</p>
  36.  
  37. <h3><a name="Creating">Creating graphics with the palette</a></h3>
  38.  
  39. <p>To create a new SVG element in a document, just move the insertion point
  40. (the caret) to the position where you want to insert it, and then click the
  41. <strong>Graphics</strong> button <img src="../Icons/Graph.gif" alt="Graph" />.
  42. The Graphics button displays a palette that stays on the screen until you
  43. click the <code>Done</code> button. Just choose the element you want to
  44. create. The available graphics elements are:</p>
  45. <ul>
  46.   <li>A line, <code>line</code> in SVG, <svg
  47.     xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  48.       <line y1="3px" x1="0px" x2="17px" y2="20px" style="stroke: #B20000"
  49.             stroke="1"/>
  50.     </svg>
  51.   </li>
  52.   <li>A rectangle, <code>rect</code> in SVG with no <code>rx</code> or
  53.     <code>ry</code> attributes, <svg xmlns="http://www.w3.org/2000/svg"
  54.     width="2cm" height="0.6cm">
  55.       <rect x="6px" width="22px" height="18px"
  56.             style="fill: #FFCB69; stroke: #0071FF" stroke="1"/>
  57.     </svg>
  58.   </li>
  59.   <li>A rectangle with rounded corners, <code>rect</code> in SVG, <svg
  60.     xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  61.       <rect rx="6px" stroke="1" width="23px" height="18px"
  62.             style="fill: #E5E500; stroke: #4C00E5"/>
  63.     </svg>
  64.   </li>
  65.   <li>A circle, <code>circle</code> in SVG, <svg
  66.     xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  67.       <circle cy="10px" cx="12px" r="10px"
  68.               style="fill: #C1FFE9; stroke: #FF0000" stroke="1"/>
  69.     </svg>
  70.   </li>
  71.   <li>An ellipse, <code>ellipse</code> in SVG, <svg
  72.     xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  73.       <ellipse cy="10px" cx="20px" rx="15px" ry="10px" style="fill: #B795FF"
  74.             stroke="1"/>
  75.     </svg>
  76.   </li>
  77.   <li>A polyline, <code>polyline</code> in SVG,<svg
  78.     xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  79.       <polyline points="4,16 23,0 37,16 55,6" stroke="1"
  80.                 style="stroke: #0000B2; fill: #FFA069"/>
  81.     </svg>
  82.   </li>
  83.   <li>A polygon, <code>polygon</code> in SVG, <svg
  84.     xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.7cm">
  85.       <polygon points="2,16 15,0 28,12 45,4 46,16 17,16 14,11" stroke="1"
  86.                style="fill: #C8FF95; stroke: #000000"/>
  87.     </svg>
  88.   </li>
  89.   <li>Splines and curves are not implemented yet. <svg
  90.     xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  91.     </svg>
  92.   </li>
  93.   <li>An embedded HTML fragment, <code>foreignObject</code> in SVG,<svg
  94.     xmlns="http://www.w3.org/2000/svg" width="6cm" height="45px">
  95.       <rect y="0" x="27px" width="110px" height="45px" style="fill: #C1FFFF"
  96.             stroke="1"/>
  97.       <foreignObject width="120px" y="0" x="20px">
  98.  
  99.         <div xmlns="http://www.w3.org/1999/xhtml">
  100.         <ul>
  101.           <li>First item</li>
  102.           <li>Second item</li>
  103.         </ul>
  104.         </div>
  105.       </foreignObject>
  106.     </svg>
  107.   </li>
  108.   <li>A SVG text, <code>text</code> in SVG<svg
  109.     xmlns="http://www.w3.org/2000/svg" width="9.5cm" height="1.2cm">
  110.       <text y="33px" x="13px"
  111.       style="font-family: helvetica; font-size: 14pt; fill: #FFAA00">A simple
  112.         text in SVG
  113.       </text>
  114.     </svg>
  115.   </li>
  116. </ul>
  117.  
  118. <p></p>
  119.  
  120. <p>When you select a shape in the palette and the selection is in the HTML
  121. structure of the document, Amaya creates a new SVG element just at the
  122. beginning of the current selection and the selected shape into this new SVG.
  123. Amaya generates SVG drawings as blocks, between paragraphs. If you wish to
  124. display a drawing inline, today you have let Amaya creates it between
  125. paragrahs then edit the source code to move it.</p>
  126.  
  127. <p>When the current selected element is a SVG element, the new shape is added
  128. to the current SVG drawing. The new created shape is added after and then can
  129. overlap previous ones.</p>
  130.  
  131. <p>The creation of a shape needs some direct interactions with the user:</p>
  132. <ul>
  133.   <li>To create a rectangle, you must first select the position of the left
  134.     corner by pressing the left mouse button. Keep the button pressed down and
  135.     move to the position of the opposite corner, then release the button. The
  136.     shape is now defined.</li>
  137.   <li>To create a circle or an ellipse, you must first select the position of
  138.     the center by pressing the left mouse button. Keep the button pressed down
  139.     and move right and/or bottom, then release the button. The shape is now
  140.     defined.</li>
  141.   <li>For a polyline and polygon, enter each point by clicking the
  142.     corresponding position with the left mouse button. To indicate the last
  143.     point, click with the middle or right button.</li>
  144. </ul>
  145.  
  146. <p>You can insert an image within a SVG drawing. Choose <strong>Image</strong>
  147. from the <strong>Types</strong> menu or click on the image <img alt="Image "
  148. border="0" src="../Icons/Image.gif" align="middle" longdesc="longdesc.htm" />
  149. button from the button bar and proceed in the <a
  150. href="ImageMaps.html#Adding">same way as in HTML</a>.</p>
  151.  
  152. <p>For inserting a mathematical expression into a SVG drawing, you have just
  153. to click in the <strong>Math</strong> palette when the selection in within a
  154. SVG. Amaya will generate a SVG <code>foreignObject</code> to embed the MathML
  155. markup.</p>
  156.  
  157. <h3><a name="Moving">Moving graphics</a></h3>
  158. <ul>
  159.   <li>By direct manipulation - combining the <strong>Control key</strong> with
  160.     the <strong>Left button</strong> of the mouse within a shape allows you to
  161.     move this shape.</li>
  162.   <li>By editing attributes.</li>
  163. </ul>
  164.  
  165. <h3><a name="Resizing">Resizing graphics</a></h3>
  166. <ul>
  167.   <li>By direct manipulation - combining the <strong>Control key</strong> with
  168.     the <strong>Middle</strong> or the <strong>Right button</strong> of the
  169.     mouse within a shape allows you to resize this shape.</li>
  170.   <li>By editing attributes.</li>
  171. </ul>
  172.  
  173. <h3><a name="Painting">Painting graphics</a></h3>
  174.  
  175. <p>With Amaya, you can paint (i.e., fill or stroke) SVG elements with a single
  176. color. The default <code>fill</code> color is <code>black</code> and the
  177. default <code>stroke</code> color is <code>transparent</code>. But you can
  178. change these values:</p>
  179. <ul type="square">
  180.   <li>Either by editing SVG attributes <code>fill</code> and
  181.     <code>stroke</code> (<span style="color: #E55500">example, fill=" #C8FF95"
  182.     stroke=" #000000"</span>),</li>
  183.   <li>Or by editing the SVG attribute <code>style</code> with CSS properties
  184.     <code>fill</code> and <code>stroke</code> (<span
  185.     style="color: #E55500">example, style="fill: #C8FF95; stroke:
  186.     #000000"</span>).</li>
  187. </ul>
  188.  
  189. <p>The palette displayed by the menu entry <strong>Style/Colors</strong>
  190. allows you to generate the SVG <code>style</code> attribute. In the Amaya
  191. palette, a click with the left mouse button generates the stroke property and
  192. a click with the middle or right mouse button generates the fill property.</p>
  193.  
  194. <p>A SVG <code>text</code> is considered as a graphic shape, so the
  195. <code>fill</code> property paints the character contents and the
  196. <code>stroke</code> property paints the character border. Amaya applies the
  197. fill property to characters, but not the stroke property. That explains why a
  198. click with the left mouse button has no immediate effect, and a click with the
  199. middle or right mouse button paints the <code>text</code> element.</p>
  200.  
  201. <p></p>
  202.  
  203. <p></p>
  204. </div>
  205.  
  206. <p align="right"><a href="Math.html"><img alt="previous" border="0"
  207. src="../Icons/left.gif" /></a><a href="Manual.html"><img alt="top" border="0"
  208. src="../Icons/up.gif" /></a><a href="ImageMaps.html"><img alt="next"
  209. border="0" src="../Icons/right.gif" /></a></p>
  210. <hr />
  211. </body>
  212. </html>
  213.