MyMans

Перевод SVG в png одой команой

$ convert ok.svg ok.png

Как и css, js тоже нет необходимости держать в самом файле достаточно поставить вызов

<svg xmlns="http://www.w3.org/2000/svg"
width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"
onclick="makemove(evt)">

<script type="text/javascript" xlink:href="outjs.js"/>

</svg>

Совсем не обязательно держать стили внутри svg файла, их можно подгружать из внешнего.

<?xml version="1.0" encoding="utf-8" standalone="no"?>

<?xml-stylesheet href="outstyle.css" type="text/css"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/SVG/DTD/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
width="500px" height="300px"
xmlns:xlink="http://www.w3.org/1999/xlink">

<ellipse cx="200" cy="150" rx="70" ry="20" class="fill"/>

</svg>

и далее в самом outstyle.css

.fill {
	fill:#ff0000;
}

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    version="1.0">
<xsl:output encoding="UTF-8"
            method="xml"
            indent="yes"/>

  <xsl:template>
  <svg xmlns="http://www.w3.org/2000/svg" width="100%"
                xmlns:xlink="http://www.w3.org/1999/xlink" >
...
  
  </xsl:template>
</xsl:stylesheet>

стока xsl:output показывает что на выходе нам нужен тот же xml

В svg так же как и html можно устанвить режими отображения курсора, только их чуть больше

cursor: default;
cursor: hand;
cursor: pointer;
cursor: pointer; cursor: hand;
cursor: crosshair;
cursor: text;
cursor: wait;
cursor: help;
cursor: move;
cursor: e-resize;
cursor: ne-resize;
cursor: nw-resize;
cursor: n-resize;
cursor: se-resize;
cursor: sw-resize;
cursor: s-resize;
cursor: w-resize;
cursor: progress;
cursor: all-scroll;
cursor: col-resize;
cursor: no-drop;
cursor: not-allowed;
cursor: row-resize;
cursor: url(mycursor.cur);
cursor: vertical-text;

Одна из прелестей SVG это фильтры, их довольно много. И что еще замечательнее что фильтр может одинаково применяться как на вложенном изображении так и на любом векторном объекте. Для тех кто знаком хоть немного с фильтрами в Photoshop небольшой пример использования фильтра Blur

<svg xmlns="http://www.w3.org/2000/svg"
width="500px" height="300px"
xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>
 <filter id="Gaussian_Blur">
  <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
 </filter>
</defs>

<image x="20" y="20" width="100"
  height="75" xlink:href="image.jpg"
  style="filter:url(#Gaussian_Blur)" />

<ellipse cx="200" cy="150" rx="70" ry="40"
  style="fill:#ff0000;filter:url(#Gaussian_Blur)"/>

</svg>

Пример

Так же как и в HTML в SVG можно создавать на лету через DOM JavaScript. Этот код создает и добавляет окружность

var svgns = "http://www.w3.org/2000/svg";

function makeShape(evt) {
    if ( window.svgDocument == null )
        svgDocument = evt.target.ownerDocument;

    var shape = svgDocument.createElementNS(svgns, "circle");
    shape.setAttributeNS(null, "cx", 25);
    shape.setAttributeNS(null, "cy", 25);
    shape.setAttributeNS(null, "r",  20);
    shape.setAttributeNS(null, "fill", "green");

    svgDocument.documentElement.appendChild(shape);
}

В SVG есть замечательное качество, использовать один объект несколько раз. Определив его в начале в теге defs затем используя как use

<defs>
    <rect id="rect" width="15" height="15" fill="red"/>
</defs>
<use x="5"  y="5"  xlink:href="#rect"/>
<use x="30" y="30" xlink:href="#rect"/>

Создаем маску для изображения. Вообще в качестве маски может выступать что угодно: текст, фигура другой имидж, все что находится внутри тега clipPath. А в качестве объекта который обрезают тоже может быть что угодно. clip-path="url(#kaernten)" указывает что к нему надо применить маску

<svg xmlns="http://www.w3.org/2000/svg"
width="500px" height="300px"
xmlns:xlink="http://www.w3.org/1999/xlink">

<clipPath id="kaernten">
	<circle cx="300" cy="200" r="150" />
</clipPath>

<image clip-path="url(#kaernten)" x="0" y="0" width="500"
height="375" xlink:href="image.jpg"/>

</svg>

Пример

Помещая на текс внутри svg надо помнить что здесь не работает обычная css иструкция color вместо него используется fill в том числе на тексте

<svg xmlns="http://www.w3.org/2000/svg"
width="300px" height="300px"
xmlns:xlink="http://www.w3.org/1999/xlink">

  <style type="text/css">
   <![CDATA[
    .fnt0 {
    	font-weight:normal;
    	font-size:15px;
    	font-family:'Arial';
    	fill:green;
    }
    .fil1 {fill:maroon;}
   ]]>
  </style>

  <text x="100" y="100" class="fnt0">MyMans</text>
  <text x="110" y="110" class="fnt0 fil1">MyMans</text>
</svg>

Пример