PLOTKARKA
Plansze
SVG Logo
Designed for the SVG Logo Contest in 2006 by Harvey Rayner, and adopted by W3C in 2009. It is available under the Creative Commons license for those who have an SVG product or who are using SVG on their site.
Grafika
Integracja SVG
Plansza interaktywna wrzesień 2014
URL:
http://www.plotkarka.eu/PI/svg/
Autor:
Radosław Kowaluk
Element svg HTML5 i favicona
Testuj
<!DOCTYPE html> <html lang="pl"> <head> <title>Przykład 1</title> <meta charset="utf-8" /> <link rel="icon" href="favicon.svg" type="image/svg+xml" /> </head> <body> <svg width="32px" height="32px" viewBox="0 0 300 300"> <title>SVG Logo</title> <g stroke-width="38.0086" stroke="#000"> <g id="svgstar" transform="translate(150, 150)"> <path id="svgbar" fill="#ffb13b" d="M-84.1487,-15.8513 a22.4171,22.4171 0 1 0 0,31.7026 h168.2974 a22.4171,22.4171 0 1 0 0,-31.7026 Z"/> <use xlink:href="#svgbar" transform="rotate(45)"/> <use xlink:href="#svgbar" transform="rotate(90)"/> <use xlink:href="#svgbar" transform="rotate(135)"/> </g> </g> <use xlink:href="#svgstar"/> </svg> </body> </html>
Integracja SVG z elementami HTML
Testuj
<img style="width:50; height:50;" alt="smiley face" src="http://www.w3.org/Icons/SVG/svg-logo.svg"/> <object style="width:50; height:50;" type="image/svg+xml" data="http://www.w3.org/Icons/SVG/svg-logo.svg"> </object> <iframe style="width:50; height:50;border: 0" src="http://www.w3.org/Icons/SVG/svg-logo.svg"> </iframe> <embed style="width:50; height:50;" type="image/svg+xml" src="http://www.w3.org/Icons/SVG/svg-logo.svg"/> <input type="image" width="50" src="http://www.w3.org/Icons/SVG/svg-logo.svg"/>
Atrybuty elementu svg
Testuj
<img src="data:image/svg+xml;utf8, <svg width='300' height='150' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'> <circle cx='25' cy='25' r='25' /> </svg>"/>
Atrybuty elementu svg
Atrybut
Opis
style
styl
preserveAspectRatio
dopasowanie
Atrybuty elementu svg
Testuj
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMCcgaGVpZ2h0PSczMCc+PGNpcmNsZSBjeD0nMTUnIGN5PScxNScgcj0nMTAnIC8+PC9zdmc+" />
CSS
Obramowanie
Testuj
<style> h2 { border: 20px solid; border-image: url(http://www.w3.org/Icons/SVG/svg-logo.svg) 30 7 repeat; } </style> <h2>Lorem ipsum</h2>
Tło
Testuj
<style> div { background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' /></svg>"); height: 150px; width: 150px; } </style> <div></div> <div style="width:50; height:50; display: inline-block; background: URL(http://www.w3.org/Icons/SVG/svg-logo.svg)"></div>
Zawartość anonimowa
Testuj
<style> div::before { content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' /></svg>"); } div::after { content: url("data:image/svg+xml,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg' width='50' height='50'><circle cx='15' cy='15' r='10' /></svg>"); } div { display:flex; align-items:center; } </style> <div>Test</div>
Zawartość anonimowa
Testuj
<style> ul { cursor: url(http://www.w3.org/Icons/SVG/svg-logo.svg), move; } </style> <ul style="text-align: left; list-style-image: url(punktor.gif);"> <li>url(punktor.gif);</li> <li>url(punktor.gif);</li> </ul>
[SVG_Integration]
SVG Integration
W3C First Public Working Draft 17 April 2014
URL:
http://www.w3.org/TR/svg-integration/