ã“れ一ã¤ã§å…¨éƒ¨OKï¼SVGアイコンã®ç®¡ç†ãƒ»ä½œæˆãƒ»ã‚³ãƒ¼ãƒ‰å¤‰æ›ãŒç°¡å˜ã«ã§ãる無料ツール -Svgsus
シンプルãªUIãªã®ã«ã€éžå¸¸ã«å¤šæ©Ÿèƒ½ã§ä¾¿åˆ©ãªSVGアイコンã®ç®¡ç†ãƒ»ä½œæˆãƒ»ã‚³ãƒ¼ãƒ‰å¤‰æ›ãŒã§ãã‚‹OS X用ã®ç„¡æ–™ãƒ„ールを紹介ã—ã¾ã™ã€‚ SVGアイコンã«é–¢ã™ã‚‹ã»ã¨ã‚“ã©ã®ã“ã¨ãŒã“れ一ã¤ã§ã§ãã¦ã—ã¾ã„ã¾ã™ã€‚ Svgsus ã¾ãšã¯ã€åˆæœŸçŠ¶æ…‹ã€‚ デフォルトã§ç™»éŒ²ã•ã‚Œã¦ã„ã‚‹SVGアイコンã¯ç„¡æ–™ã§åˆ©ç”¨ã§ãã€ã‚«ãƒ†ã‚´ãƒªã‚„ã‚ーワードã§ç›®çš„ã®ã‚¢ã‚¤ã‚³ãƒ³ã‚’見ã¤ã‘ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚
ã“ã®ã‚¯ã‚ªãƒªãƒ†ã‚£ã¯ã‚¹ã‚´ã‚¤ï¼JPEG, GIF, PNGç”»åƒã‚’ベクターã«å¤‰æ›ã™ã‚‹ç„¡æ–™ã®ã‚ªãƒ³ãƒ©ã‚¤ãƒ³ã‚µãƒ¼ãƒ“ス -PicSVG
写真やイラストや文å—ãªã©ã€JPEG, GIF, PNGç”»åƒã‚’SVGã®ãƒ™ã‚¯ã‚¿ãƒ¼ã«å¤‰æ›ã§ãã‚‹ç„¡æ–™ã®ã‚ªãƒ³ãƒ©ã‚¤ãƒ³ã‚µãƒ¼ãƒ“スを紹介ã—ã¾ã™ã€‚ 写真画åƒã§ã‚‚ã“ã®ã‚¯ã‚ªãƒªãƒ†ã‚£ã¯ã€ã‚¹ã‚´ã‚¤ã§ã™ãï¼
æ±äº¬ã®é‰„é“路線図SVGを作りã¾ã—ãŸï¼†ãƒ‘ブリックドメインã§é…布ã—ã¾ã™
æ±äº¬ã®é‰„é“路線図SVGを作りã¾ã—ãŸï¼†ãƒ‘ブリックドメインã§é…布ã—ã¾ã™ ãƒãƒ³ãƒ‰ãƒ³åœ°ä¸‹é‰„路線図ã§ã®ä½œå›³æ–¹æ³•ã«åŸºã¥ã„ãŸæ±äº¬ã®é‰„é“路線図を作ã£ãŸã®ã§å…¬é–‹ãƒ»é…布ã—ã¾ã™ time2014/12/20 hatenabookmark- Illustratorを使ã£ã¦ã€æ±äº¬åœã®äº¤é€šè·¯ç·šå›³ã‚’作りã¾ã—ãŸã€‚ ç¾åœ¨ã€ã“れを書ãã ã—ãŸSVGファイルを以下ã«ç½®ã„ã¦ã€ã‚¦ã‚§ãƒ–上ã‹ã‚‰è¦‹ã‚‰ã‚Œã‚‹ã‚ˆã†ã«ã—ã¦ã„ã¾ã™ã€‚ã¾ã マップã¨ã—ã¦å¤§ã—ãŸå‡¦ç†ã¯ã—ã¦ã„ãªã„ã®ã§ã€PCã¨ã‹ã ã¨ã‚¹ã‚¯ãƒãƒ¼ãƒ«ãŒé¢å€’ã§ã™ãŒã€ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ãªã©ã‚¿ãƒƒãƒç«¯æœ«ã ã¨ãã“ãã“見られるã¨æ€ã„ã¾ã™ã€‚ ãªãŠã€AIファイル・SVGファイルã¯ãƒ‘ブリックドメイン(CC0)ã¨ã—ã¾ã™ã®ã§ã€é…布・改変・販売å«ã‚ã€ç…®ã‚‹ãªã‚Šç„¼ããªã‚Šå¥½ãã«ä½¿ã£ã¦ã„ãŸã ã„ã¦ã‹ã¾ã„ã¾ã›ã‚“。 railmaps - github ã©ã†ã—ã¦æã„ãŸã®ï¼Ÿ 昔ã‹ã‚‰ãƒãƒªãƒ¼ãƒ™ãƒƒã‚¯æ°ã®ãƒãƒ³ãƒ‰ãƒ³åœ°ä¸‹é‰„路線図ãŒã¨ã¦ã‚‚好ãã§ã€è‡ªåˆ†ã‚‚ã“ã†ã„ã†ã‚‚
Illustratorã¨IcoMoonã§SVGスプライトã®ãƒ©ã‚¯ãƒ©ã‚¯è¨å®šï¼
2016å¹´2月9æ—¥ Illustrator, SVG, 便利ツール ç¹°ã‚Šè¿”ã—使ã†SVGå½¢å¼ã®ã‚¢ã‚¤ã‚³ãƒ³ç‰ã‚’表示ã™ã‚‹éš›ã«ä¾¿åˆ©ãªSVGスプライト。ã—ã‹ã—ã€symbol ã‚¿ã‚°ã§å›²ã‚“ã§â€¦ä¸€ã¤ä¸€ã¤ã«IDを付ã‘ã¦â€¦ viewBox 属性をコピペã—ã¦â€¦ã¨ã€æœ¬å½“ã«ã‚³ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ãŒã‚ã‚“ã©ãã•ã„ï¼æ–°è¦ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã‚’始ã‚る度ã«è¨å®šã™ã‚‹ã®ãŒç…©ã‚ã—ããªã‚Šã€ã„ã‚ã„ã‚ã¨æ¥½ã™ã‚‹æ–¹æ³•ã‚’試ã—ãŸçµæžœã€ã‚¢ã‚¤ã‚³ãƒ³ã‚¸ã‚§ãƒãƒ¬ãƒ¼ã‚¿ãƒ¼ãƒ„ールã®ã€ŒIcoMoon Appã€ã‚’使ã†æ–¹æ³•ã«è½ã¡ç€ã„ãŸã®ã§ã€ã‚„り方を紹介ã—ãŸã„ã¨æ€ã„ã¾ã™ã€‚ ↑ç§ãŒ10年以上利用ã—ã¦ã„ã‚‹ä¼šè¨ˆã‚½ãƒ•ãƒˆï¼ SVGスプライトã¨ã¯ï¼Ÿ SVGスプライトã¯ã€ãƒã‚´ã‚„アイコンãªã©ã®è¤‡æ•°ã®SVGç”»åƒã‚’ã²ã¨ã¤ã®ãƒ•ã‚¡ã‚¤ãƒ«ã«ã¾ã¨ã‚ã¦ä¿å˜ã—ã€ä½¿ã„ãŸã„時ã«å‘¼ã³å‡ºã™æ–¹æ³•ã§ã™ã€‚SVGãªã®ã§ã€æ‹¡å¤§ç¸®å°ã—ã¦ã‚‚画質ãŒåŠ£åŒ–ã—ã¾ã›ã‚“。詳細ã¯éŽåŽ»è¨˜äº‹ã€Œã‚¢ã‚¤ã‚³ãƒ³ãƒ•ã‚©ãƒ³ãƒˆã‹ã‚‰SVGã¸ï¼ã‚ˆã‚Šæ‰‹è»½ã«ãƒ™ã‚¯ã‚¿ãƒ¼ç”»åƒã‚’表示ã—よã†ã€ã«ç›®
CSSã¨SVGã§æ›‡ã‚Šã‚¬ãƒ©ã‚¹ã®ã‚ˆã†ãªåŠ¹æžœã‚’作る
2011å¹´ã®9月ã«ã€ŒCSSã¨SVG filterã§ã‚¬ãƒ©ã‚¹ã£ã½ã„効果をã¤ã‘ã‚‹ã€ã¨ã„ã†ã®ã‚’書ãã¾ã—ãŸãŒã€ã“ã‚Œã¯Firefoxã®ã¿ã‚’対象ã¨ã—ãŸã‚‚ã®ã§ã—ãŸã€‚ ãã“ã§ä»Šå›žã¯ã§ãã‚‹ã ã‘多ãã®ãƒ–ラウザã«å¯¾å¿œã—ãŸã‚‚ã®ã‚’作ã£ã¦ã¿ã¾ã™ã€‚ 完æˆå“Frosted glass effect with CSS & SVG 背景画åƒã«ã¯WetFoto.comã«ã‚ˆã‚‹#246 Wetlook with Beautiful Brunette in Leggings and Jacket. Girl in black jacket, white wetlook leggings and skirt in boots, get wet fully clothed in the sea.を使用ã—ã¦ã„ã¾ã™ï¼ˆãƒªãƒ³ã‚¯å…ˆã¯Flickrã§ã™ï¼‰ã€‚ ã“ã®ç”»åƒã¯CC BY-NC-SA 2.0ã§ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã•ã‚Œã¦ã„ã¾ã™ã€‚ 背景画åƒã«ã¯Beryl Ch
第1回　SVGã®åŸºç¤ŽçŸ¥è˜ | gihyo.jp
SVGã¯æ¯”較的å¤ãã‹ã‚‰ã‚る仕様ã®1ã¤ã§ã™ãŒã€2010å¹´3月ã«ãƒžã‚¤ã‚¯ãƒã‚½ãƒ•ãƒˆãŒInternet Explorer 9ã§ã®ã‚µãƒãƒ¼ãƒˆã‚’表明ã—ã¦ã‹ã‚‰ä¸€æ°—ã«æ³¨ç›®ãŒé«˜ã¾ã‚Šã¾ã—ãŸã€‚ãã‚“ãªå¤ãã¦æ–°ã—ã„SVGを今ã‹ã‚‰ä½¿ãˆã‚‹æƒ…å ±ã¨ã€å°†æ¥ã®å±•æœ›ã‚’å…¨4回ã®é›†ä¸é€£è¼‰ã§è§£èª¬ã—ã¾ã™ã€‚ SVGã¨ã¯ SVG（Scalable Vector Graphics）ã¯ã€XMLベースã®ãƒ™ã‚¯ã‚¿ãƒ¼ã‚°ãƒ©ãƒ•ã‚£ãƒƒã‚¯è¨€èªžã‚‚ã—ãã¯ç”»åƒãƒ•ã‚©ãƒ¼ãƒžãƒƒãƒˆã§ã™ã€‚W3Cã«ã‚ˆã£ã¦ãã®ä»•æ§˜ãŒå®šç¾©ã•ã‚Œã¦ãŠã‚Šã€ç”»åƒãƒ•ã‚©ãƒ¼ãƒžãƒƒãƒˆã¨ã—ã¦ç”¨ã„ã‚‹å ´åˆã¯æ‹¡å¼µå.svgãŒä½¿ç”¨ã•ã‚Œã€MIMEå½¢å¼ã¯image/svg+xmlãŒç”¨ã„られã¾ã™ã€‚ SVGã®ç¾çŠ¶ Firefoxã€Safariã€Google Chromeã€Operaãªã©ã®ãƒ–ラウザãŒæ—¢ã«ã‚µãƒãƒ¼ãƒˆã—ã¦ãŠã‚Šã€Internet Explorerã‚‚ãã®ãƒãƒ¼ã‚¸ãƒ§ãƒ³9ã€å…·ä½“çš„ã«ã¯Internet Explorer 9: Platform
SVGã¯æ™®åŠã™ã‚‹ã€‚Webデザイナーã¯CSSã¨ã¨ã‚‚ã«SVGãŒå¿…é ˆç§‘ç›®ã«
Internet Explorer 9ã§ã¯ã€Webブラウザ上ã«ãƒ™ã‚¯ã‚¿ãƒ¼å½¢å¼ã§ç”»åƒã‚’æç”»ã§ãã‚‹SVG（Scalable Vector Graphics）ã®ã‚µãƒãƒ¼ãƒˆãŒè¡¨æ˜Žã•ã‚Œã¦ã„ã¾ã™ã€‚ITproã®è¨˜äº‹ã€ŒIE9ã®ç™»å ´ã§ç”»åƒãƒ•ã‚©ãƒ¼ãƒžãƒƒãƒˆã®æœ¬å‘½ã«æµ®ä¸Šã™ã‚‹SVGã€ã§ã¯ã€IE9ãŒSVGをサãƒãƒ¼ãƒˆã™ã‚‹ã“ã¨ã§SVGã®æ™®åŠãŒå§‹ã¾ã‚‹ã®ã§ã¯ãªã„ã‹ã¨äºˆæƒ³ã—ã¦ã„ã¾ã™ã€‚åŒæ„ã—ã¾ã™ã€‚ SVGã¯HTMLã€CSSã€JavaScriptã¨ä¸¦ã¶Webã®è¦ç´ ã« SVGã¯2001å¹´ã«ãƒãƒ¼ã‚¸ãƒ§ãƒ³1.0ã€2003å¹´ã«ãƒãƒ¼ã‚¸ãƒ§ãƒ³1.1ãŒW3Cã®å‹§å‘Šã¨ã—ã¦ç–定ã•ã‚Œã¾ã—ãŸã€‚ã—ã‹ã—マイクãƒã‚½ãƒ•ãƒˆã¯IE6ã€IE7ã€IE8ã¨ãšã£ã¨SVGã«å¯¾å¿œã›ãšã€ä¸€æ–¹ã§SVGç–定以å‰ã‹ã‚‰åŒç¤¾ãªã©ãŒæŽ¨é€²ã—ã¦ã„ãŸVML（Vector Markup Language）ã¨å‘¼ã°ã‚Œã‚‹ãƒ™ã‚¯ã‚¿ãƒ¼å½¢å¼ã®è¨€èªžã‚’実装ã—ã¦ãã¾ã—ãŸã€‚ Webブラウザã§æœ€å¤§ã‚·ã‚§ã‚¢ã‚’æŒã¤IEã§ä½¿ãˆãªã„SVGã¯
1
ランã‚ング
ãŠçŸ¥ã‚‰ã›
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}