revision:
defines a clipping path, to be used by the clip-path property.
a clipping path restricts the region to which paint can be applied. Conceptually, parts of the drawing that lie outside of the region bounded by the clipping path are not drawn.
attributes:
codes:
<svg viewBox="0 0 100 90">
<clipPath id="myClip">
<!--Everything outside the circle will be clipped and therefore invisible. -->
<circle cx="40" cy="35" r="35" />
</clipPath>
<!-- The original black heart, for reference -->
<path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
<!--Only the portion of the red heartinside the clip circle is visible.-->
<use clip-path="url(#myClip)" href="#heart" fill="red" />
</svg>
can be used to define a platform-independent custom cursor.
a recommended approach for defining a platform-independent custom cursor is to create a PNG image and define a cursor element that references the PNG image and identifies the exact position within the image which is the pointer position (i.e., the hot spot).
deprecated - no longer recommended
attributes: x, y, xlink:href
defines a custom filter effect by grouping atomic filter primitives.
it is never rendered itself, but must be used by the filter attribute on SVG elements, or the filter CSS property for SVG/HTML elements.
attributes: x, y, width, height, filterRes, filterUnits, primitiveUnits, xlink:href
codes:
<svg width="230" height="120">
<filter id="blurMe">
<feGaussianBlur stdDeviation="5"/>
</filter>
<circle cx="60" cy="60" r="50" fill="green"/>
<circle cx="170" cy="60" r="50" fill="green" filter="url(#blurMe)"/>
</svg>
includes elements from a different XML namespace. In the context of a browser, it is most likely (X)HTML.
attributes: height, width, x, y
codes:
<svg viewBox="0 0 200 200">
<style>
div .html {color: yellow; font: 18px serif; height: 100%; overflow: auto; }
</style>
<polygon points="5,5 195,10 185,185 10,195" />
<!-- Common use case: embed HTML text into SVG -->
<foreignObject x="20" y="20" width="160" height="160">
<!--In the context of SVG embedded in an HTML document, the XHTML namespace
could be omitted, but it is mandatory in the context of an SVG document-->
<div class="html">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed mollis mollis mi ut ultricies. Nullam magna ipsum,
porta vel dui convallis, rutrum imperdiet eros. Aliquam
erat volutpat.
</div>
</foreignObject>
</svg>
defines a hatch path used by the <hatch> element.
experimental technology
attributes: d, offset
codes:
<svg width="200" height="200">
<defs>
<hatch id="hatch" hatchUnits="userSpaceOnUse" pitch="5" rotate="135">
<hatchpath stroke="#a080ff" stroke-width="2"/>
</hatch>
</defs>
<rect fill="url(#hatch)" stroke="black" stroke-width="2" x="10%" y="10%" width="80%" height="80%" />
</svg>
allows to add scripts to an SVG document.
attributes: crossorigin, href, type, xlink:href
codes:
<svg viewBox="0 0 10 7">
<script>
// <![CDATA[
window.addEventListener('DOMContentLoaded', () => {
function getColor () {
const R = Math.round(Math.random() * 255).toString(16).padStart(2,'0')
const G = Math.round(Math.random() * 255).toString(16).padStart(2,'0')
const B = Math.round(Math.random() * 255).toString(16).padStart(2,'0')
return `#${R}${G}${B}`
}
document.querySelector('#trial').addEventListener('click', (e) => {
e.target.style.fill = getColor()
})
})
// ]]>
</script>
<circle id="trial" cx="5" cy="3" r="3" />
</svg>
allows style sheets to be embedded directly within SVG content.
attributes:
codes:
<svg viewBox="0 0 10 6">
<circle id="two" cx="5" cy="3" r="2" />
<style>
#two{
fill: gold;
stroke: maroon;
stroke-width: 1px;
}
</style>
</svg>
a view is a defined way to view the image, like a zoom level or a detail view.
attributes: viewBox, preserveAspectRatio, zoomAndPan, viewTarget
codes:
<svg viewBox="0 0 300 100" width="300" height="100">
<view id="one" viewBox="0 0 100 100" />
<circle cx="50" cy="50" r="40" fill="red" />
<view id="two" viewBox="100 0 100 100" />
<circle cx="150" cy="50" r="40" fill="green" />
<view id="three" viewBox="200 0 100 100" />
<circle cx="250" cy="50" r="40" fill="blue" />
</svg>