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/
Wykaz skrótów
Dodatki pracy 2013/2014
Adres:
http://plotkarka.eu/b/abbr.html
Autor opracowania:
Radosław Kowaluk
AAC
advanced audio coding
AI
Artificial Intelligence
AIML
Artificial Intelligence Markup Language
API
Application Programming Interface
ASCII
American Standard Code for Information Interchange
BMP
? (file format)
BTS
Base Transceiver Station
CDR
? (file format Corel Corporation)
CMD
Cross Document Messaging
CMS
Content Management System
CMY
cyan, magenta, yellow
CMYK
cyan, magenta, yellow and key (black)
CSS
Cascading Style Sheets
DHTML
Dynamic HyperText Markup Language
DOM
Document Object Model
DTD
Document Type Definition
ECMA
European Computer Manufacturers Association
EOT
Embedded Open Type
FLAC
Free Lossless Audio Codec (format pliku dźwiękowego)
FTP
File Transfer Protocol
GIF
Graphics Interchange Format
GNU
GNU’s not Unix
GPL
General Public License
GPS
Global Positioning System
HSL
Hue Saturation Lightness
HSLA
Hue Saturation Lightness Alpha
HSV
Hue Saturation Value (brightness)
HTML
HyperText Markup Language
HTTP
Hypertext Transfer Protocol
HTTPS
Hypertext Transfer Protocol Secure
IE
Internet Explorer
IP
Internet Protocol
IT
Information Technology
JNG
JPEG network graphics
JPEG
(file format), Joint Photographic Experts Group
JPG
JPEG
ISO
International Organization for Standardization
i18n
internationalization
MDN
Mozilla Developer Network
MIME
Multipurpose Internet Mail Extensions
MP3
MPEG-1/MPEG-2 Audio Layer 3
NEF
Nikon Electronic File
PCX
? PiCture eXchange
PCM
Pulse Code Modulation (format dźwięku)
PHP
PHP/FI - Personal Home Page/Forms Interpreter
PNG
Portable Network Graphics
PSD
? (file format Photoshop Document)
RAW
? (format graficzny)
RGB
Red Green Blue
RGBA
Red Green Blue Alpha
SGML
Standard Generalized Markup Language
SMIL
Synchronized Multimedia Integration Language
SWF
small web format
sRGB
standarised RGB (Red, Green, Blue)
SQL
Structured Query Language
SVG
Scalable Vector Graphics
TCP/IP
Transmission Control Protocol / Internet Protocol
TIFF
Tagged Image File Format
TXT
text file
URI
Uniform Resource Identifier
URL
Uniform Resource Locator
UTF
Unicode Transformation Format
XDM
Cross-Document Messaging
XML
Extensible Markup Language
XHTML
Extensible HyperText Markup Language
W3C
World Wide Web Consortium
WAI
Web Accessibility Initiative
WaSP
Web Standards Project
WAV
WAVE (format pliku dźwiekowego)
WCAG
Web Content Accessibility Guidelines
WMA
Windows Media Audio
WWW
World Wide Web