289 lines
10 KiB
HTML
289 lines
10 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<!--
|
||
|
|
Copyright 2010 Google Inc.
|
||
|
|
|
||
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||
|
|
you may not use this file except in compliance with the License.
|
||
|
|
You may obtain a copy of the License at
|
||
|
|
|
||
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
||
|
|
|
||
|
|
Unless required by applicable law or agreed to in writing, software
|
||
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||
|
|
See the License for the specific language governing permissions and
|
||
|
|
limitations under the License.
|
||
|
|
|
||
|
|
Original slides: Marcin Wichary (mwichary@google.com)
|
||
|
|
Modifications: Ernest Delgado (ernestd@google.com)
|
||
|
|
Alex Russell (slightlyoff@chromium.org)
|
||
|
|
Brad Neuberg
|
||
|
SVG-edit presentation: Pavol Rusnak (pavol@rusnak.io)
|
||
|
|
-->
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<!--[if gte IE 9]>
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
|
|
<![endif]-->
|
||
|
|
|
||
|
|
<!--[if lt IE 9]>
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
|
||
|
|
<![endif]-->
|
||
|
|
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<title>SVG-edit, Pavol Rusnák, SVG Open 2010, Paris</title>
|
||
|
<link href="https://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono" rel="stylesheet" />
|
||
|
|
<link rel="stylesheet" href="style.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="presentation">
|
||
|
|
<div id="presentation-counter"></div>
|
||
|
|
<div class="slides">
|
||
|
|
|
||
|
|
<div class="slide">
|
||
|
|
<section class="middle">
|
||
|
|
<h1 style="font-size: 220%;">SVG-edit</h1>
|
||
|
|
<p><img src="logo.svg" alt="logo" width="30%" height="30%" /></p>
|
||
|
|
<h2>Pavol Rusnák</h2>
|
||
|
|
<h3>SVG Open 2010, Paris</h3>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slide">
|
||
|
|
<section>
|
||
|
|
<header>
|
||
|
|
<h2>SVG-edit is ...</h2>
|
||
|
|
</header>
|
||
|
|
<ul class="bulleted">
|
||
|
|
<li>a web-based, JavaScript-driven SVG editor that works in any modern browser</li>
|
||
|
|
<li>not a full replacement for Inkscape (yet :-P)</li>
|
||
|
|
<li>licensed under very liberal open source license (Apache License 2.0)</li>
|
||
|
|
<li>platform for other projects which need to edit SVG documents</li>
|
||
|
|
<li>pushing browsers to find their limits</li>
|
||
|
|
<li>always up-to-date</li>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slide">
|
||
|
|
<section>
|
||
|
|
<header>
|
||
|
|
<h2>History: 1.0 (13th Feb 2009)</h2>
|
||
|
|
</header>
|
||
|
|
<ul class="bulleted">
|
||
|
|
<li>draw path, line, freehand-circle, rectangle</li>
|
||
|
|
<li>clear drawn image</li>
|
||
|
|
<li>delete element</li>
|
||
|
|
<li>save image</li>
|
||
|
|
<li>→ Narendra Sisodiya</li>
|
||
|
|
</ul>
|
||
|
<p><a href="http://svg-edit.googlecode.com/svn/branches/1.0/svg-editor.html">_</a></p>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slide">
|
||
|
|
<section>
|
||
|
|
<header>
|
||
|
|
<h2>History: 2.0 (3rd June 2009)</h2>
|
||
|
|
</header>
|
||
|
|
<ul class="bulleted">
|
||
|
|
<li>draw ellipse, square</li>
|
||
|
|
<li>change line style (stroke-dasharray)</li>
|
||
|
|
<li>rearranged whole code to utilize OOP</li>
|
||
|
|
<li>GUI enhancement</li>
|
||
|
|
<li>→ Pavol Rusnák</li>
|
||
|
|
</ul>
|
||
|
|
<p><a href="http://svg-edit.googlecode.com/svn/branches/2.0/svg-editor.html">_</a></p>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slide">
|
||
|
|
<section>
|
||
|
|
<header>
|
||
|
|
<h2>History: 2.1 (17th June 2009)</h2>
|
||
|
|
</header>
|
||
|
|
<ul class="bulleted">
|
||
|
|
<li>tooltips added to all UI elements</li>
|
||
|
|
<li>edit of fill opacity, stroke opacity, group opacity</li>
|
||
|
|
<li>selection of elements</li>
|
||
|
|
<li>move/drag of elements</li>
|
||
|
|
<li>save SVG file to separate tab</li>
|
||
|
|
<li>create and edit text elements</li>
|
||
|
|
<li>contextual panel of tools</li>
|
||
|
|
<li>change rect radius, font-family, font-size</li>
|
||
|
|
<li>keystroke handling</li>
|
||
|
|
<li>→ Jeff Schiller</li>
|
||
|
|
</ul>
|
||
|
|
<p><a href="http://svg-edit.googlecode.com/svn/branches/2.1/editor/svg-editor.html">_</a></p>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slide">
|
||
|
|
<section>
|
||
|
|
<header>
|
||
|
|
<h2>History: 2.2 (8th July 2009)</h2>
|
||
|
|
</header>
|
||
|
|
<ul class="bulleted">
|
||
|
|
<li>multiselect mode</li>
|
||
|
|
<li>undo/redo actions</li>
|
||
|
|
<li>resize elements</li>
|
||
|
|
<li>contextual tools for rect, circle, ellipse, line, text elements</li>
|
||
|
|
<li>some updated button images</li>
|
||
|
|
<li>stretched the UI to fit the browser window</li>
|
||
|
|
<li>resizing of the SVG canvas</li>
|
||
|
|
</ul>
|
||
|
|
<p><a href="http://svg-edit.googlecode.com/svn/branches/2.2/editor/svg-editor.html">_</a></p>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slide">
|
||
|
|
<section>
|
||
|
|
<header>
|
||
|
|
<h2>History: 2.3 (8th Sept 2009)</h2>
|
||
|
|
</header>
|
||
|
|
<ul class="bulleted">
|
||
|
|
<li>align objects</li>
|
||
|
|
<li>rotate objects</li>
|
||
|
|
<li>clone objects</li>
|
||
|
|
<li>select next/prev object</li>
|
||
|
|
<li>edit SVG source</li>
|
||
|
|
<li>gradient picking</li>
|
||
|
|
<li>polygon mode</li>
|
||
|
|
<li>→ Alexis Deveria</li>
|
||
|
|
</ul>
|
||
|
|
<p><a href="http://svg-edit.googlecode.com/svn/branches/2.3/editor/svg-editor.html">_</a></p>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slide">
|
||
|
|
<section>
|
||
|
|
<header>
|
||
|
|
<h2>History: 2.4 Arbelos (11th Jan 2010)</h2>
|
||
|
|
</header>
|
||
|
|
<ul class="bulleted">
|
||
|
|
<li>include raster images</li>
|
||
|
|
<li>select non-adjacent elements</li>
|
||
|
|
<li>group/ungroup</li>
|
||
|
|
<li>zoom</li>
|
||
|
|
<li>layers</li>
|
||
|
|
<li>curve segments in paths</li>
|
||
|
|
<li>UI localization</li>
|
||
|
|
<li>wireframe mode</li>
|
||
|
|
<li>change background</li>
|
||
|
|
<li>convert shapes to path</li>
|
||
|
|
</ul>
|
||
|
|
<p><a href="http://svg-edit.googlecode.com/svn/branches/2.4/editor/svg-editor.html">_</a></p>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slide">
|
||
|
|
<section>
|
||
|
|
<header>
|
||
|
|
<h2>History: 2.5 Bicorn (15th June 2010)</h2>
|
||
|
|
</header>
|
||
|
|
<ul class="bulleted">
|
||
|
|
<li>open local files (Firefox 3.6+, Chrome 6+ only)</li>
|
||
|
|
<li>import SVG into drawing (Firefox 3.6+, Chrome 6+ only)</li>
|
||
|
|
<li>connector lines and arrows</li>
|
||
|
|
<li>smoother freehand paths</li>
|
||
|
|
<li>editing outside the canvas</li>
|
||
|
|
<li>increased support for SVG elements</li>
|
||
|
|
<li>add/edit sub-paths</li>
|
||
|
|
<li>multiple path segment selection</li>
|
||
|
|
<li>support for foreign markup (MathML)</li>
|
||
|
|
<li>radial gradients</li>
|
||
|
|
<li>eye-dropper tool</li>
|
||
|
|
<li>stroke linejoin and linecap</li>
|
||
|
|
<li>export to PNG</li>
|
||
|
|
</ul>
|
||
|
|
<p><a href="http://svg-edit.googlecode.com/svn/branches/2.5/editor/svg-editor.html">_</a></p>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slide">
|
||
|
|
<section>
|
||
|
|
<header>
|
||
|
|
<h2>Plugin Architecture</h2>
|
||
|
|
</header>
|
||
|
|
<pre>
|
||
|
|
svgEditor.addExtension('Hello World', function () {
|
||
|
|
|
||
|
|
return {
|
||
|
|
svgicons: 'extensions/helloworld-icon.xml',
|
||
|
|
buttons: [{...}],
|
||
|
|
mouseDown () {
|
||
|
|
...
|
||
|
|
},
|
||
|
|
|
||
|
|
mouseUp (opts) {
|
||
|
|
...
|
||
|
|
}
|
||
|
|
};
|
||
|
|
});</pre>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slide">
|
||
|
|
<section>
|
||
|
|
<header>
|
||
|
|
<h2>Features in progress (for 2.6 Cycloid)</h2>
|
||
|
|
</header>
|
||
|
|
<ul class="bulleted">
|
||
|
|
<li>IE9 support</li>
|
||
|
|
<li>context menus</li>
|
||
|
|
<li>path clipping</li>
|
||
|
|
<li>support for <a> element</li>
|
||
|
|
<li><a href="http://10k.aneventapart.com/Entry/319">advanced gradient editor</a> (more stops, elliptic fills)</li>
|
||
|
|
<li>shape library tool</li>
|
||
|
|
<li>linking off to clipart/image library sites</li>
|
||
|
|
</ul>
|
||
|
|
<p><a href="http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html">_</a></p>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slide">
|
||
|
|
<section>
|
||
|
|
<header>
|
||
|
|
<h2>Projects based on SVG-edit</h2>
|
||
|
|
</header>
|
||
|
|
<ul class="bulleted">
|
||
|
|
<li>Firefox add-on</li>
|
||
|
|
<li>Opera widget</li>
|
||
|
|
<li>Google Wave gadget</li>
|
||
|
|
<li>Wiki extensions (Dokuwiki, Instiki, MoinMoin, XWiki)</li>
|
||
|
|
<li><a href="http://www.cloud-canvas.com/cloudcanvas.php">Cloud Canvas</a></li>
|
||
|
|
<li>Eduvid</li>
|
||
|
|
<li>Sesame</li>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slide">
|
||
|
|
<section>
|
||
|
|
<header>
|
||
|
|
<h2>Resources</h2>
|
||
|
|
</header>
|
||
|
|
<ul class="bulleted">
|
||
|
|
<li><a href="https://github.com/SVG-Edit/svgedit">https://github.com/SVG-Edit/svgedit</a> (demos, downloads, source, wiki, issue tracker)</li>
|
||
|
|
<li>#svg-edit on irc.freenode.net</li>
|
||
|
|
<li><a href="https://groups.google.com/group/svg-edit">https://groups.google.com/group/svg-edit</a></li>
|
||
|
|
<li><a href="https://en.wikipedia.org/wiki/SVG-edit">https://en.wikipedia.org/wiki/SVG-edit</a></li>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slide">
|
||
|
|
<section class="middle">
|
||
|
|
<h2>Thank you!</h2>
|
||
|
|
<h3>Questions?</h3>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div> <!-- slides -->
|
||
|
|
|
||
|
|
</div> <!-- presentation -->
|
||
|
|
|
||
|
|
<script src="script.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|