SVG要素でaltの代わりになるもの | なすびブログ
SVGを表示するにはいくつか方法があります。 pngやjpgと同じように <img> を使って表示する場合はいつも通り代替テキストとしてalt属性を使えばよいのですが、SVGスプライトや vue-svg-loader を使うなどで <svg> をHTMLにインラインで書き出したい場合もあると思います。 <svg> には代替テキストの機能は存在しないので、代わりとなる機能がないか探してみました <title> を使う方法 SVGファイル内に <title> を入れておくことで、マシンリーダブルにすることができます。 ただしこの方法には、 カーソルを合わせるとツールチップが出てしまう .svg ファイル内に存在することになるので、管理がしづらい などの取り回ししづらい部分があり、imgのaltと比べてもなんかいまいち。 WAI-ARIAを使う方法 そこでおすすめしたいのがこちら <svg> に
Best Practices for Getting Started with SVG
Web graphics in SVG (Scalable Vector Graphics) format offer better quality display over a broader range of device sizes compared to bitmap-based graphics. SVG also has inherent accessibility making it the best choice for interactive graphics and those involving text. SVG usage on the Web continues to grow. Last week at SVG Open 2011, we had the opportunity to meet with and hear from Web developers
CSS4のconic-gradientを先取りする方法 - Qiita
CSS3のグラデーションには線形グラデーションのlinear-gradientと放射状グラデーションのradial-gradientがありますが、CSS4のWorking Draftには円錐状にグラデーションさせるためのconic-gradientという項目が存在します。ただし、conic-gradientはまだ草案段階なので2017/7時点ではどのブラウザでも使用する事はできません。 今回、デザイナーに相談されて色々と調べてみた結果、いくつかの方法でconic-gradientを実現する事ができたので、その方法についてご紹介したいと思います。 conic-gradientを実現する方法 私の方で調べた限りだと以下の３つの方法が見つかりました。 CSS conic-gradient() polyfillを使用する CSSのclipプロパティを使って表現する（サンプル） SVGのマスキングを
Vue.js+d3.jsで折れ線グラフを描く - Qiita
Vue.js Advent Calendar 2016 11日目 まえがき Vue.jsと描画機能とd3.jsの計算機能を合わせて折れ線グラフを描いてみます。 d3.jsで直接描画してもいいのですが、せっかくなのでVue.jsで宣言的に描けたらな、と。 デモ デモ(jsfiddle) コード メインのコンポーネント <svg :width="width" :height="height" :viewBox="viewBox"> <my-line v-for="(line,index) in lines" :x-scale="xScale" :y-scale="yScale" :parameters="line" :index="index"></my-line> <horizontal-grid v-for="y in yTicks" :x-scale="xScale" :y-scale=
Delivering Octicons with SVG
EngineeringDelivering Octicons with SVGGitHub.com no longer delivers its icons via icon font. Instead, we’ve replaced all the Octicons throughout our codebase with SVG alternatives. While the changes are mostly under-the-hood, you’ll immediately feel… GitHub.com no longer delivers its icons via icon font. Instead, we’ve replaced all the Octicons throughout our codebase with SVG alternatives. While
Gulpを使ったSVGスプライトのアイコンシステムとワークフローの作り方
SVGスプライトって、なんか複雑なイメージがありませんか？ 僕はそうでした。なんか、面倒くさそう。。。どこから始めて良いかわからない。。。といった感じでずっと手をつけられずにいました。 でも、今回やってみて思ったんですが、一度ワークフローを確立してしまえばアイコン管理がかなり便利になります。CSSスプライトの時よりも管理が楽になりますし、表示サイズや今後の高解像度対応を気にしなくて良くなるのも嬉しいですね。 SVGスプライトについての英語のリソースはあるのですが、説明が多く、とっつきにくいものも多い印象なので、ここではできるだけシンプルに必要なことだけをまとめてみたいと思います。 では、SVGスプライト・アイコンシステムのGulpを使ったワークフローの構築、始めましょう！ 目次 達成したいこと デモページ SVGスプライトの仕組み ブラウザサポート 用意するもの 導入ステップ 最後に 達成
We Love SVG - Google Fonts for icons | Icons8
<script type="text/javascript" src="//web.archive.org/web/20151204075254/https://cdn.rawgit.com/icons8/bower-webicon/v0.10.7/jquery-webicon.min.js"></script> Flat ColorWin10Font AwesomeFoundationMaterialGlyphiconsIcomoonIonWebhostinghubEntypoElusiveWPFMfglabsRaphaelSimple LineWeatherLsfLineconsMeteoconsMetrizeOcticonsIconicMakiOpenwebiconsStroke7TypiconsZocialBrandicoFontelicoStateface <!DOCTYPE h
A Practical Guide to SVGs on the web
Introduction We live in the age of pixels. As designers & developers of the web, pixels can be both our friends and our enemies. We want everything to look nice and sharp for anyone who uses any of the websites we work on, but we need to keep file sizes down for performance. There is pretty much only one way to go with icons, logos and illustrations on the web — SVG. Scalable Vector Graphics can l
A Complete Guide to SVG Fallbacks | CSS-Tricks
If you’re using SVG and are worried about unsupported environments, this is the guide for you. There is no single solution, since how you use SVG dictates the fallback. UGURUS by DigitalOcean for agency owners UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Here at CSS-Tricks, there’s a lot of information telling you how
wheelnav.js - spinning ever
Wheel the Force be with you wheelnav.js brings spinning into your web pages Download Wheel navigation JavaScript library built on SVG It can be tab navigation, pie menu, sub menu and more Examples Include wheelnav.js, add a div, create wheelnav on div It is possible via JavaScript or HTML5 data attributes Documentation
Advent Calendar 3日目:SVG画像を1バイトでも削るためのコードゴルフ - 聴く耳を持たない(片方しか)
このエントリーはGraphical Web Advent Calendar 2013 への参加記事です。 今日は12月3日、ということで Advent Calendar の3日目は私id:rikuoが担当します。今回はSVG画像ファイルを1バイトでも削るためのコードゴルフのTipsを紹介していきます。 コードゴルフって？ まずコードゴルフとはなにか？の説明から。 コードゴルフとは任意のソースコードを出来るだけ短く書くことを目的にしたものです。そのコードの動作を損なわなず、かつ可能な限り短縮して記述する手法を試行錯誤していく様子が、ゴルフのように少ない打法で競うところに似ていることからこのように呼ばれています。 またそれを競技としたコンテストも催されていますね。 画像のファイルサイズ低減策 JPEG、GIF、PNGといったビットマップ画像であればファイルサイズを低減する方法やソフトウェア・ツ
Advent Calendar 3日目:SVG画像を1キロバイトでも削るダイエット術！ - 聴く耳を持たない(片方しか)
これは GraphicalWeb (CSS, SVG, WebGL etc) Advent Calendar 2012 - Adventar への参加の記事です。 3日目の今日は私 id:rikuo がSVG画像ファイルの軽量化テクニックを取り上げてみます。 ちょっと長くなってしまったので、ご注意ください。 はじめに、SVGとは？ まず始めに、SVGとは何か？の簡単な説明です。 SVGとはScalable Vector Graphics（スケーラブルベクターグラフィックス）の略で、XMLを基盤に書かれた画像記述言語、またはベクター画像ファイルのことです。画像ファイルというと、JPEG、GIF、PNGまたBMPなどはよく知られていますね。それらの画像はピクセル（ドット）ごとに色を表現したもので、総じてラスター（ビットマップ）画像と呼ばれています。 対してSVGは座標や図形で扱うため、拡大・縮
Page Loading Effects | Demo 1
To start the page loading animation, click the following link: Show Page Loader
)
Basic SVG animation (Windows)
This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support. This topic covers basic SVG animation and is a prerequisite for Intermediate SVG Animation. Basic knowledge of HTML and JavaScript is assumed. To fully understand the material presented in this topic, plan to spend about one hour of study. Note In order
SVG線画が美しいリッチアニメーションの作り方 (1/2)
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Gaussian blur cutoff at edges
GitHub - jamesmartin/inline_svg: Embed SVG documents in your Rails views and style them with CSS
D3.js with Vue.js live examples
https://github.com/johnnynotsolucky/samples/tree/master/vuejs-d3
SVG MANIAX Ver.2 - Mars vanilla
