SVGを使用ã—ã¦ã‚‹ä¼æ¥ãƒ»å›£ä½“ã®ã‚µã‚¤ãƒˆã‚’22ヶ国ã€160件以上調ã¹ã¦ã¿ãŸ - è´ã耳をæŒãŸãªã„(片方ã—ã‹)
ã“ã®ãƒ€ã‚¤ã‚¢ãƒªãƒ¼ã§ã¯éŽåŽ»ã«ä½•åº¦ã‹SVGã®è¨˜äº‹ã‚’書ã„ã¦ã„ã‚‹ã®ã§ã™ãŒã€ãã‚Œã«å¯¾ã™ã‚‹å響㧠SVGã£ã¦æœªã ã«ä½¿ã£ã¦ã‚‹ã¨ã“ã‚を見ãŸã“ã¨ãŒç„¡ã„ ã¨ã‹ ã„ã¤ã«ãªã£ãŸã‚‰ä½¿ãˆã‚‹ã‚ˆã†ã«ãªã‚‹ã®ã‹ æ°¸é ã«æ™®åŠã—ãªã•ãㆠã¿ãŸã„ãªæ„見をよã見ã‹ã‘ã¾ã™ã€‚ ãã†ã—ãŸåå¿œã«ã‚«ãƒãƒ³ã¨ããŸâ€¦â€¦ã¨ã„ã†ã»ã©ã§ã¯ãªã„ã®ã§ã™ãŒã€ç´å¾—ã—ã¦ã‚‚らã†ã«ã¯å®Ÿä¾‹ã‚’挙ã’ã¦åè«–ã™ã‚‹ã®ãŒåˆ†ã‹ã‚Šã‚„ã™ã„ã ã‚ã†ãªã€ã¨è€ƒãˆã¦SVGã®åˆ©ç”¨çŠ¶æ³ã‚’調査ã—ã¦ã¿ã¾ã—ãŸã€‚ ã‹ã¨ã„ã£ã¦å€‹äººã‚µã‚¤ãƒˆã®åˆ©ç”¨ä¾‹ã‚’挙ã’ã‚‹ã ã‘ã§ã¯èª¬å¾—力ãŒãªã„ã§ã—ょã†ã‹ã‚‰ã€è‘—åãªä¼æ¥ã‚„団体ã§ã®SVG採用事例をリストアップã—ã¦ã¿ãŸæ¬¡ç¬¬ã§ã™ã€‚ ãã—ã¦ã‚‚ã†ä¸€ã¤ã®å‹•æ©Ÿã¨ã—ã¦ã€Webサイトã®åˆ¶ä½œç¾å ´ã§SVGã®å°Žå…¥ã‚’検討ã™ã‚‹éš›ã«ã€åŒåƒšã‚„上å¸ã€ã¾ãŸã‚¯ãƒ©ã‚¤ã‚¢ãƒ³ãƒˆã‹ã‚‰ã®åŒæ„を得る・説得ã™ã‚‹æ‰‹æ®µã¨ã—ã¦ã‚‚ã€æ—¢ã«å®Ÿéš›ã«åˆ©ç”¨ã—ã¦ã„ã‚‹ä¼æ¥ã‚„団体をæ示ã§ãã‚Œã°è©±ã‚’進ã‚ã‚„ã™ã„ã ã‚ã†ãªã€â€¦â€¦ã¨ã„ã£ãŸç‹™ã„ã‚‚ã‚ã‚Šã¾ã™ã€‚ 例ãˆã° ã‚ã®æœ‰åãª
æ±äº¬ã®é‰„é“路線図SVGを作りã¾ã—ãŸï¼†ãƒ‘ブリックドメインã§é…布ã—ã¾ã™
æ±äº¬ã®é‰„é“路線図SVGを作りã¾ã—ãŸï¼†ãƒ‘ブリックドメインã§é…布ã—ã¾ã™ ãƒãƒ³ãƒ‰ãƒ³åœ°ä¸‹é‰„路線図ã§ã®ä½œå›³æ–¹æ³•ã«åŸºã¥ã„ãŸæ±äº¬ã®é‰„é“路線図を作ã£ãŸã®ã§å…¬é–‹ãƒ»é…布ã—ã¾ã™ time2014/12/20 hatenabookmark- Illustratorを使ã£ã¦ã€æ±äº¬åœã®äº¤é€šè·¯ç·šå›³ã‚’作りã¾ã—ãŸã€‚ ç¾åœ¨ã€ã“れを書ãã ã—ãŸSVGファイルを以下ã«ç½®ã„ã¦ã€ã‚¦ã‚§ãƒ–上ã‹ã‚‰è¦‹ã‚‰ã‚Œã‚‹ã‚ˆã†ã«ã—ã¦ã„ã¾ã™ã€‚ã¾ã マップã¨ã—ã¦å¤§ã—ãŸå‡¦ç†ã¯ã—ã¦ã„ãªã„ã®ã§ã€PCã¨ã‹ã ã¨ã‚¹ã‚¯ãƒãƒ¼ãƒ«ãŒé¢å€’ã§ã™ãŒã€ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ãªã©ã‚¿ãƒƒãƒç«¯æœ«ã ã¨ãã“ãã“見られるã¨æ€ã„ã¾ã™ã€‚ ãªãŠã€AIファイル・SVGファイルã¯ãƒ‘ブリックドメイン(CC0)ã¨ã—ã¾ã™ã®ã§ã€é…布・改変・販売å«ã‚ã€ç…®ã‚‹ãªã‚Šç„¼ããªã‚Šå¥½ãã«ä½¿ã£ã¦ã„ãŸã ã„ã¦ã‹ã¾ã„ã¾ã›ã‚“。 railmaps - github ã©ã†ã—ã¦æã„ãŸã®ï¼Ÿ 昔ã‹ã‚‰ãƒãƒªãƒ¼ãƒ™ãƒƒã‚¯æ°ã®ãƒãƒ³ãƒ‰ãƒ³åœ°ä¸‹é‰„路線図ãŒã¨ã¦ã‚‚好ãã§ã€è‡ªåˆ†ã‚‚ã“ã†ã„ã†ã‚‚
SVGクリッピングマスクã«ãƒãƒ£ãƒ¬ãƒ³ã‚¸ï¼é™æ¢ç”»åƒã‚‚動画もã€SVGã§åˆ‡ã‚ŠæŠœã“ã†ï¼
SVGクリッピングマスクã«ãƒãƒ£ãƒ¬ãƒ³ã‚¸ï¼é™æ¢ç”»åƒã‚‚動画もã€SVGã§åˆ‡ã‚ŠæŠœã“ã†ï¼Webクリエイターボックスã§ã¡ã‚‡ã“ã¡ã‚‡ã“å–り上ã’ã¦ããŸSVG。今回ã¯ç¬¬å››å¼¾ï¼SVGを使ã£ãŸã‚¯ãƒªãƒƒãƒ”ングマスクを紹介ã—ã¾ã™ã€‚今ã¾ã§ã¯ç”»åƒã«é€éŽPNGã‚’é‡ãã¦ãƒžã‚¹ã‚¯ã‚’表ç¾ã§ãã¾ã—ãŸãŒã€é«˜è§£åƒåº¦ãƒ‡ã‚£ã‚¹ãƒ—レイã«å¯¾å¿œã•ã›ãŸã‚Šã€ãƒžã‚¹ã‚¯è‡ªä½“ã«åŠ¹æžœã‚’ã¤ã‘ã‚‹ãªã‚‰SVGãŒä¾¿åˆ©ã‹ãªãƒ¼ã¨æ€ã„ã¾ã™ã€‚サムãƒã‚¤ãƒ«ç”»åƒã«ãƒ•ãƒ¬ãƒ¼ãƒ ã‚’ã¤ã‘ãŸã‚Šã€ãƒ‡ã‚¶ã‚¤ãƒ³ã®ã‚¢ã‚¯ã‚»ãƒ³ãƒˆã¨ã—ã¦ä½¿ãˆã‚‹ã®ã§ã€ãœã²ãƒžã‚¹ã‚¿ãƒ¼ã—ã¦ãã ã•ã„ãï¼ SVG ã®ã‚¯ãƒªãƒƒãƒ”ングマスク基礎1. ç”»åƒã‚’用æ„ãã‚Œã§ã¯ã•ã£ãã試ã—ã¦ã¿ã¾ã—ょã†ï¼ã¾ãšã¯åˆ‡ã‚ŠæŠœã‹ã‚Œã‚‹ç”»åƒã‚’用æ„ã—ã€img ã‚¿ã‚°ã§è¡¨ç¤ºã—ã¾ã™ã€‚ã“ã®æ™‚ç”»åƒã« mask ã¨ã„ã†ã‚¯ãƒ©ã‚¹ã‚’与ãˆã¦ãŠãã¾ã™ã€‚ <img class="mask" src="images/rose.jpg" alt="Rose" /> 2. マスクã®åž‹ã‚’用æ„Illustrato
ã‚‚ã—もフãƒãƒ³ãƒˆã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ãŒSVG女åをイジã£ãŸã‚‰ã€‚音声èªè˜ã‚„fpsコントãƒãƒ¼ãƒ©ãªã©æœ¬æ°—ã ã—ã™ãŽãªä»¶
SVG女åãŒå…¬é–‹ã•ã‚Œã¦2週間ãŒãŸã¡ã¾ã—㟠ãŸã„ã¸ã‚“多ãã®æ–¹ã«è¦–è´ã—ã¦ã„ãŸã ã„ã¦ã„るよã†ã§ã€æ„Ÿæ¿€ã—ã¦ã„ã¾ã™ï¼ 「SVGã€ãŒã™ã£ã‹ã‚Šãƒã‚ºãƒ¯ãƒ¼ãƒ‰ã«ãªã£ã¦ã„ã¾ã™ã。 ã¾ã ã®æ–¹ã¯ãœã²ã”覧ãã ã•ã„ï¼ SVG女åを見る SVG女åã«ã¯ãƒ¦ãƒ¼ã‚¶ãƒ¼ãŒè‡ªç”±ã«ã‚¤ã‚¸ã£ã¦ã‚ªãƒªã‚¸ãƒŠãƒ«ä½œå“を作れるモードãŒã‚ã‚Šã¾ã™ã€‚ ã„ã‚ゆる「神モードã€ã¨ã„ã†ã‚„ã¤ã§ã™ã€‚ ã“ã®ã€Œç¥žãƒ¢ãƒ¼ãƒ‰ã€ã«å…¬é–‹ç›´å¾Œã‹ã‚‰å¤šãã®ä½œå“ãŒé›†ã¾ã£ã¦ã„ã¾ã™ã€‚（嬉ã—ã„ï¼ï¼‰ SVGã¯JavaScriptã‹ã‚‰æ“作ã§ãã‚‹ã“ã¨ãŒç‰¹å¾´ã§ã™ã€‚ 色を変ãˆã‚‹ã“ã¨ã¯ã‚‚ã¡ã‚ã‚“ã€ã‚ªãƒ–ジェクトを変形ã•ã›ãŸã‚Š å†ç”Ÿé€Ÿåº¦ã‚’変ãˆã‚‹ã“ã¨ã‚‚JavaScriptã‹ã‚‰ã§ãã¦ã—ã¾ã†ã‚“ã§ã™ã。 ã“ã®SVG女åãŒã™ã”ã„ï¼ä»Šè¦‹ã¦ãŠãã¹ãフãƒãƒ³ãƒˆã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã®æœ¬æ°—ï¼ ã‚»ãƒ”ã‚¢ã‚«ãƒ©ãƒ¼ カラフルãªSVG女åã®ä¸–ç•ŒãŒã‚»ãƒ”ア色ã«ãªã£ã¦ã¾ã™ã€‚ å†ç”Ÿã™ã‚‹ï¼ˆSVG女åã®ãƒšãƒ¼ã‚¸ã«é£›ã³ã¾ã™ï¼‰ コードを見る SVG女åã®æ¶ˆå¤± アイã¡ã‚ƒã‚“ãŒæ¶ˆ
SVG女åã‚’90%軽ãã—ãŸSVG軽é‡åŒ–テク+α #svggirl
ã‚ã„ã¤ä»•äº‹ã—ã¦ãªã„ã§å¥³ã®åã®ã‚¤ãƒ©ã‚¹ãƒˆã°ã£ã‹ã‚Šã„ã˜ã£ã¦ã‚‹ãžã¨é™°ãªãŒã‚‰è¨€ã‚ã‚Œã¦ã„ãŸå–œç´ã§ã™ã€‚ HTML5ã§å‹•ãSVGアニメーション「SVG女åã€ãŒãƒ©ã‚¹ãƒ™ã‚¬ã‚¹ã§ã®ãƒžã‚¤ã‚¯ãƒã‚½ãƒ•ãƒˆåŸºèª¿è¬›æ¼”MIX11ã§å…¬é–‹ã•ã‚Œã€ 世界を（ã„ã‚ã‚“ãªæ„味ã§ï¼‰é©šã‹ã—ã¦ãã¾ã—ãŸãŒã€ ã¤ã„ã«æœ¬æ—¥ã€æ—¥æœ¬ã§ã‚‚公開ã•ã‚Œã¾ã—ãŸï¼ ã—ã‹ã‚‚日本版ã«åˆã‚ã›ã¦ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚‚é•·ããªã£ã¦ã„ã¾ã™ï¼ ã“ã£ãりブラウザを英語ã«ã—ã¦è¦‹ã¦ã„ãŸäººã‚‚必見ã§ã™ï¼ （神風動画ã•ã‚“ã«ã‚ˆã‚‹äºˆå‘Šç·¨å‹•ç”»ï¼ï¼‰ 神風動画ã•ã‚“ã«ã‚ˆã‚‹ãƒã‚¤ã‚¯ã‚ªãƒªãƒ†ã‚£ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’SVGã§å†ç¾ã™ã‚‹ã¨è¨€ã†è©¦ã¿ã€ プãƒã‚°ãƒ©ãƒ ã«ã¤ã„ã¦ã¯ SVG Girlã®å…¬é–‹ã¨å†…部実装（プãƒã‚°ãƒ©ãƒžãƒ¼ãƒ–ãƒã‚°ï¼‰ ã§æ‹…当プãƒã‚°ãƒ©ãƒžãƒ¼ã®å¾éƒ·ãŒèª¬æ˜Žã—ã¦ã„ã¾ã™ãŒã€ã¨ã«ã‹ã ã„ã‹ã«SVGã‚’ãã‚Œã„ã«è»½ãã™ã‚‹ã‹ãŒæœ€é‡è¦ï¼ SVGã¨ã„ãˆã°æ‹¡å¤§ã—ã¦ã‚‚è’れる事ã®ç„¡ã„ベクター形å¼ã§ã€pngよりも軽ãã¤ãã‚ŒãŸã‚Šã™ã‚‹ã“ã¨ã§ä½¿ã‚ã‚Œã¦ã„ã¾ã™ãŒã€ 今回
1
ランã‚ング
ãŠçŸ¥ã‚‰ã›
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
http://ja.d3js.node.ws/blocks/mike/map/
GitHub - d3/d3: Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:
{{#tags}}- {{label}}
{{/tags}}