SVG MANIAX

SVG MANIAX Scalable Vector Graphics in AKITA দా௚थ 贃ך瑎8FC$SFBUPS.FFUVQ7PMչوٕثرغ؎أ㼎䘔պ

匟歊湫埠 $$0 8FC%FTJHOFS

47(⯋䎃

47(⯋䎃 ה鎉ְ竲ֽגծכװ䎃ֻ׵ְ穗麓

9~ 3.2~ 4~ 3~ 3.0~ 3.2~ ״ֲװֻ ⢪ִ׷橆㞮ך倯ָءؑ،ָرֻؕז׏׋ iOS

47(׾琎噰涸ח⢪ְ׋ְ ׀儗⚅חⰅ׏׋

47(ךֿ׸׌ֽכ椚鍑׃הֽ

WJFX#PY

width="200px" height="160px" viewBox="0 0 200 160" ج४఺ͷxy࠲ඪ viewBoxͷ෯ viewBoxͷߴ͞

WJFX#PYך⦼ 䏟垥禸邌爙؟؎ؤ WJFX#PY XJEUI IFJHIU width="200px" height="160px" viewBox="0 0
200 160" ͒

width="100px" height="100px" viewBox="0 0 200 200" <circle cx="100" cy="100" r="100"/>
QY QY ⰼך湫䖇כ 䏟垥 47(ך䏟垥 ـٓؐؠךQY = WJFX#PYך⦼הXJEUI IFJHIUך⦼כⴽ暟ד֮׷ QY =

WJFX#PYך䭷㹀ָזְ㜥さ QY QY ⰼך湫䖇כ 䏟垥 ⴱ劍䏟垥禸 QY = = 47(ך䏟垥
鋵銲稆ך؟؎ؤ width="100px" height="100px" viewBox="0 0 200 200" <circle cx="100" cy="100" r="100"/>

䏟垥ך؟؎ؤכծXJEUI IFJHIUח״׏ג㢌׻׷ խWJFX#PYח״׷ խ㢌䳔ׁ׸׋䏟垥䏟垥ך⽃⡘ךֿה׾ 䏟垥禸㢌䳔 ⵃ欽⽃⡘

ֿ׸׵׾椚鍑׃גֶֻֿהָ 47(ך邌爙דعو׵זְ؝خ WJFX#PY XJEUI IFJHIU QSFTFSWF"TQFDU3BUJP ͱɺͱ͖Ͳ͖

*MMVTUSBUPSד47(׾⥂㶷儗ծٖأهٝءـպ׾ ثؑحؙׅ׷הծTWH銲稆חXJEUIהIFJHIU㾩䚍ָ 䭷㹀ׁ׸זְ 1PJOU

iOS 暴ח؝؎خה؝؎خךֶ⚅鑧ך׋׭ח䗳⥜דׅ

iOS width="200px" height="160px" viewBox="0 0 200 160" ˖ $44ד䭷㹀ׅ׸לծ㾩䚍ך⦼״׶׮⮚⯓ׁ׸׷ ˖
*&דכչIFJHIUBVUPպָ⸬ַזְ ˖ "OESPJEתדչQSFTFSWF"TQFDU3BUJPպ䭁簭嫰桦ךغָؚ֮׷ ˖ זךדծٖأهٝءـ'MVJEחׅ׷חכծJGSBNFךٖأهٝءـַהずׄ䩛岀׾ WJFX#PY䭷㹀֮׶կX IכչQYպ䭷㹀ׅ׷ָし

׍ז׫חծ47(ךٖٝتؚٔٝכ *&װ&EHFָ剑׮笺뜧

㙵׭鴥׫倯

㣐ֹֻⴓֽג 珏겲

Dynamic Interactive Mode Animated Mode Secure Animated Mode Static Mode
Secure Static Mode SVGͷ͢΂ͯͷػೳΛ දࣔ ɾ ॲཧϞʔυ Ξχϝʔγϣϯ ॲཧϞʔυ Ξχϝʔγϣϯ ॲཧϞʔυ ੩ࢭըදࣔϞʔυ * ࡟আ͞ΕΔ༧ఆ ੩ࢭըදࣔϞʔυ ֎෦Ϧιʔεࢀর εΫϦϓτͷ࣮ߦ ΠϯλϥΫγϣϯॲཧ ʢΠϕϯτ ɾ ϦϯΫʣ SMILΞχϝʔγϣϯ HTML <img> HTML <object> <embed> <iframe> HTML5 inline SVG CSS background content HTML <img> CSS background content

ֿ׸׵׾椚鍑ְ׋׌ְ׋♳ד˘

47(׾⢪ְ׋ֻז׷ 㣐طة

歗⫷ⰻחر٦ةה圓鸡׾ⰻ⺪דֹ׷ 1

խխ歗⫷խד֮׶ծխխ俑剅խד֮׷ 47(כ

9.-俑剅׌ַ׵ծׅץגך㔳䕎כչ銲稆պ 俑㶵ر٦ةذؗأزظ٦س׾ろ׭׵׸׷ 歗⫷ך⚥ח،ؙإءؽٔذ؍׾然⥂דֹ׷

+1&(װ1/(ך➿剏ذؗأز alt="·͙Ζͷण࢘" longdesc="http:// example.com/desc1"

47(דכ銲稆׀החة؎زٕذؗأز׾縧ֽ׷ <g> <title>͍͘Β</title> <desc>…</desc> </g> <g> <title>ւଽͱγϟϦ</title> <desc>…</desc> </g> <g>
<title>͓ࡼ</title> <desc>…</desc> </g> <title>͍͘Βͷ܉؋</title>

SPMFהBSJBMBCFMMFECZ׾鷄鎸ׅ׸ל أؙٔ٦ٝٔ٦ت٦㼎䘔׮דֹ׷ <svg viewBox="0 0 100 100" role="img" aria-labelledby="title desc">
<title id="title">ϋϯόʔΨʔ</title> <desc id="desc">ϋϯόʔΨʔͷϑϥοτͳ ΠϥετΞΠίϯ</desc> … </svg>

͜Μͳάϥϑ΋"ݸʑͷཁૉ͝ͱ"ʹ ΞΫηγϒϧʹ͢Δ͜ͱ͕Ͱ͖Δ 0 30 60 90 120 150 ౉ล ాத
ߴڮ ླ໦ ࠤ౻ ⡟谏挿 ꈿ加挿 넝堀挿歊⚥ 挿床鴟挿

ֿ׿זծ兛鸐כ铣׫♳־ז׿ַדֹזׁ׉ֲז ♧卐歗⫷תד׮ָ،ؙإءـٕח

ػ٦خךٌآُ٦ٕ⻉ⱄⵃ欽䚍 2

EFGT銲稆 TZNCPM銲稆 VTF銲稆 ٌآُ٦ٕ㹀纏 ٌآُ٦ٕ⿫撑

47(ךׅ׀ְהֿ׹ ずׄ47(俑剅ⰻծ׮׃ֻכ㢩鿇ך47(俑剅ⰻך ⦐ղך㔳䕎׾וֿדד׮ⱄⵃ欽דֹ׷ HTML5 ͷ Web Components Λઌߦ࣮૷͍ͯ͠ΔΑ͏ͳ΋ͷ͔ͳʁ

銲稆ךⱄⵃ欽 <symbol id="s"> <path d="..."/> </symbol> <use xlink:href="#s" x="20" y="10"
fill="#fc0"/> TZNCPM銲稆荈⡤כ㹋⡤ךזְ㔳䕎 VTF銲稆דⱄⵃ欽׃גⴱ׭ג邌爙דֹ׷ 1PJOU TZNCPMך㜥さծ鋵47(銲稆הכⴽך杝甧׃׋WJFX#PY׾ 䭯ג׷ךדծⱄⵃ欽׃׋ꥷך؟؎ؤ㢌刿׮〳腉

<symbol id="tw"> <path d="M64,6.2c-1.1,0.6-4.3,1.8-7.3,2.1c1.9-1,4.8-4 .5,5.5-7.2c-1.9,1.2-6.1,2.9-8.2,2.9v0C51.5,1.6, 48.2,0,44.4,0 c-7.3,0-13.2,5.9-13.2,13.2c0,1,0.1,2,0.3,2.9h0c -9.9-0.3-20.7-5.2-27.2-13.7c-4,6.9-0.5,14.6,4,1 7.4c-1.6,0.1-4.4-0.2-5.8-1.5 C2.5,23,4.7,29.1,12.7,31.3c-1.6,0.8-4.3,0.6-5.5
,0.4c0.4,3.9,5.9,9,11.8,9c-2.1,2.5-10.1,6.9-19, 5.5C6.1,49.9,13.2,52,20.7,52 c21.3,0,37.8-17.3,37-38.6c0,0,0,0,0-0.1c0-0.1,0 -0.1,0-0.2c0-0.1,0-0.1,0-0.2C59.5,11.7,62.1,9.3 ,64,6.2z"/> </symbol> <use xlink:href="#tw" x="20" y="0" fill="#319aec"/> <use xlink:href="#tw" x="40" y="0" fill="#319aec"/> <use xlink:href="#tw" x="60" y="0" fill="#319aec"/> <use xlink:href="#tw" x="80" y="0" fill="#319aec"/> ؝٦سꆀ׮眍秈דֹ׷

47(4QSJUFT JOEFYIUNM JDPOTTWH Send Mail 卐ך47(ך⚥ח֮׷㔳䕎׾ծ⦐ⴽחוֿחד׮邌爙דֹ׷ 1PJOU <svg> <use xlink:href="icon.svg#train"/>
</svg>

˖ WJFX#PY׾杝荈ח㹀纏דֹ׷׋׭ծ⽃杝דך䏟垥禸׾䭯א ˖ את׶ծVTF銲稆דⱄⵃ欽ׅ׷ꥷח؟؎ؤ׾㢌刿דֹ׷䏟垥禸㢌䳔 ˖ *MMVTUSBUPSךءٝنٕכTZNCPM銲稆ח㢌䳔ׁ׸׷ ˖ 㔳䕎銲稆׾ؚٕ٦ؾؚٝ׃ג⽃חذٝفٖ٦ز⻉׃׋׮ך ˖ ⽃杝ך䏟垥禸כ䭯׋׆ծⱄⵃ欽儗ח؟؎ؤכ㢌刿דֹזְ
TZNCPM銲稆הEFGT銲稆ך麩ְ TZNCPM銲稆 EFGT銲稆

ֻׁ׏ה،صً٦ءّٝ 2

47(ך،صً٦ءّٝכ 㣐ֹֻⴓֽג珏겲 4.*-،صً٦ءّٝ $44،صً٦ءّٝ 47(%0.،صً٦ءّٝ

4.*-،صً٦ءّٝ 㼛勻涸ח䐖姺٥窟さ✮㹀זךד 䘌׸ג׮ְְדׅ $ISPNF⟃꣬דכծׅדחꬊ䱿㤺הז׏גְ׷ 1PJOU

$44،صً٦ءّٝ $44ךBOJNBUJPO USBOTJUJPOדך ،صً٦ءָّٝ〳腉׌ָ˘ ׋׌׃ծ⹛ַׇ׷ךכ 47(ד⢪ִ׷$44فٗػذ؍חꣲ׵׸׷ *&דכծ47(ך銲稆חUSBOTGPSNָת׏׋ֻ⸬ַזְךד $44דכ㔳䕎׾獳⹛٥㢌䕎ׇׁ׷ֿהָדֹזְ 1PJOU 1PJOU

$44،صً٦ءّٝ את׶ծ$44ד䭷㹀דֹזְ㾩䚍⦼כ،صً♶〳腉 <circle cx="120" cy="120" r=“100" />
㔳䕎ך㣐ֹׁծ⡘縧ծػأ䕎朐זו׾䭷㹀ׅ׷ 㾩䚍כծ$44דכ䭷㹀דֹזְ

IUUQXXXXPSH5347(QSPQJEYIUNM 47(ד⢪ִ׷$44فٗػذ؍♧鋮 1PJOU

$44،صً٦ءّٝ .FEJB2VFSJFTה PQBDJUZז׿ַ׾穈׫さ׻ׇ׷ךכ0,

IUUQBTDJJKQFMFN

47(%0.،صً٦ءّٝ +BWB4DSJQUד47(ך%0.׾乼⡲׃ג ،صً٦ءׇׁّٝ׷ 47(銲稆ך㾩䚍⦼׾剅ֹ䳔ִ׷կ㹋颵涸חז׿ד׮דֹ׷ 1PJOU 47(%0.%0.-FWFMכ)5.-%0.%0.-FWFM הכⴽ暟זךדծK2VFSZדכ銲稆欰䧭זודֹזְ 1PJOU 㢩鿇ך47(ؿ؋؎ٕ׾ծJNH銲稆װ$44CBDLHSPVOEד ⿫撑邌爙ׇׁ׋㜥さծ➬圫♳ת׏׋ֻ⹛ַזְ
1PJOU

47(%0.،صً٦ءّٝ var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("x", "50"); rect.setAttribute("y", "50");
rect.setAttribute("width", "100"); rect.setAttribute("height", "100"); rect.setAttribute("fill", "red"); var rot = 0; setInterval(function(){ rect.setAttribute("transform", "rotate(" + rot + " 100 100)"); rot = rot + 1; }, 10); document.querySelector("svg").appendChild(rect);

47(%0.،صً٦ءّٝ 47(欽ך،صً٦ءّٝٓ؎ـٓٔ׾⢪ֲֶ IUUQTHSFFOTPDLDPN IUUQKVMJBODPNSFTFBSDIWFMPDJUZ IUUQTOBQTWHJP 넝堣腉ז窟さ،صً٦ءّٝٓ ؎ـٓٔկ 47(ך،صً٦ءّٝ欽鷿׀ה חفؚٓ؎ٝ׾㼪Ⰵ׃ג⢪欽ׅ ׷կ׍׳׏הꨇ׃ְկ
K2VFSZךBOJNBUF✼䳔הז׏ג ְ׷،صً٦ءّٝٓ؎ـٓٔկ 〳腉זꣲ׶$44׾⢪׏גֻ׸׷ ךד،صً٦ءّٝך넝鸞⻉ָ 㔳׸׷կ 㸣Ⰻח47(㼔欽ךٓ؎ـٓٔկ  47(ך欰䧭װծ㢩鿇ך47(ؿ؋ ؎ٕ׾《׶鴥׿דⰻ鿇׾乼⡲ׅ ׷ֿה׮〳腉կ  K2VFSZٓ؎ؙח剅ֽ׷կ 넝堣腉 ֶׅׅ׭

DEMO +

47(%0.،صً٦ءّٝ )5.-װ$BOWBTדך،صً٦ءّٝדכ ػ٦خ׀הח剅ֹ⳿ׅ䗳銲ָ֮׷ めんどい！

47(%0.،صً٦ءّٝ 47(ז׵ծⰋ⡤׾剅ֹ⳿׃׋䖓׮圓鸡׾ ׉ךתת⥂䭯׃גְ׷ךדծػ٦خך䪔ְָ嚂

IUUQTHSFFOTPDLDPNUXFFONBY

IUUQDPEFQFOJPQQQQQFO&72C:R

ꆙ׌ֽ ⹛ַׇ׷ 湡׌ֽ ⹛ַׇ׷ 47(כ 卐窩׾ׁ׏ה剅ֹ⳿׃גծ ׍׳ֿ׏ה鿇ⴓ涸ח⹛ַׅךחぢְג׷

״ֻ֮׷颵㉏

鯪ֻׅ׷倯岀כ

ΞϯΧʔϙΠϯτͷ਺ 1854 ϑΝΠϧ༰ྔ 66KB ΞϯΧʔϙΠϯτͷ਺ 461 ϑΝΠϧ༰ྔ 29KB ،ٝؕ٦ه؎ٝز׾幾׵ׅ

ΞϐΞϥϯεͰɺԼ͔Β ʮઢˠઢˠృΓʯͷॱ൪ͱͨ͠ਤܗ 47( ʹอଘ͢Δͱɺࣗಈతʹ෼ׂ͞Εɺ ̏ͭͷಉਤܗ͕ॏͶΒΕΔ SFDU ཁૉ SFDU ཁૉ SFDU
ཁૉ ،ؾ،ٓٝأ׾㢳欽׃זְ

؝٦سך㼭侧挿⟃♴ך呞侧׾䫇ִ׷

47(0.(זוד剑黝⻉ׅ׷ https://jakearchibald.github.io/svgomg/

MUFSכ䗳銲剑⡚ꣲח http://jorgeatgu.github.io/svg-ﬁlters/

*&װ"OESPJEזוד 嫰桦ָ期׏ג邌爙ׁ׸׷

iOS width="200px" height="160px" viewBox="0 0 200 160" WJFX#PY䭷㹀֮׶կX IכչQYպ䭷㹀ׅ׷

47(ךٖأهٝءـ⻉כ 鋵銲稆ךQBEEJOHUPQד TWHXSBQ TWH .svg-wrap > svg { display: block;
position: absolute; max-width: 100%; width: 100%; height: 100%; } .svg-wrap { position: relative; height:0; padding-top: 60%; } ֿך㜥さכծTWH銲稆ךXJEUI IFJHIUכ䭷㹀׃זְֿה 1PJOU

ؿؓ٦ٕغحؙכ

ؿؓ٦ٕغحָؙ䗳銲זךכծ⚺ח؝؎خ׵ IE 8 Android 2

IE 8 Android 2 銲⟝ה׃גוֲ׃ג׮㼎䘔ׅץֹ儗כ չ47(׾⢪׻זְպ

⹈䓼ׅ׷ךחְְ؟؎زכ

IUUQTXXXESPQCPYDPNTZLI[TDNTWMUGPMMPXVQ@TWH@MJOLTNE EMQSFWJFXGPMMPXVQ@TWH@MJOLTNE

הְֲֿהד ת׆כ47(׾兛鸐ך歗⫷ה׃ג ⢪׏ג׫״ֲ

׬׆ַ׃ְֿה׾׃זֽ׸ל 47(כ׬׆ַ׃ֻזְ

匟歊湫埠 ֮׶ָהֲ׀ְׂת׃׋

SVG MANIAX

SVG MANIAX

More Decks by Naoki Matsuda

Other Decks in Technology

Featured

Transcript