「はてな」「LINE（ライン）」など、SVGのフリーアイコンを作っていただいたのでシェアします先日、Twitterで協力をお願いしたアイコンの作成依頼が受理され、さっそく作っていただきました。 いやーほんと、仕事が早くて驚きです！ ※コリスのアイコンはダウンロードできません。 海外の無料アイコンはかっこよくてかわいいのですが、日本人向けのものがないのが難点です。「はてな」「LINE（ライン）」「Feedly」のアイコンをお願いして、作成してもらいました。
HTMLとCSSでSVGを使うためのメモ - Qiita
Qiita初投稿です。 2014年にフリーランスとなってからというもの、なかなか勉強の時間がとれず、おざなりになってしまっている技術がいくつかあります…… その中でもSVGの扱い方について、簡単にではありますが調べたのでメモしておきます。 昨日までの自分に教えるような気持ちで書きます！ まず、SVGは使えるのか？ ブラウザ対応状況 Can I use... Support tables for HTML5, CSS3, etc だいたい大丈夫です（2016/07/27現在） IEも9以降であれば表示はできるっぽいです。 メリット 拡大・縮小に強い（きれい） 軽い 使い方によってはCSSで装飾したり、アニメーションさせることも可能 アクセシビリティ上も良いことがある（まだあまり調べてない） デメリット 写真やイラスト等には向かない（どんな画像かによる。これまでGIFやPNGで書き出していたタ
SVG形式の画像ファイルを表示する
WebページでSVG形式の画像を表示するコードを紹介します。 概要 SVG画像の準備 今回は下図のSVG画像を表示します。今回SVG画像は Adobe Illustratorで作成します。 imgタグを利用して表示する imgタグを利用してSVG画像を表示する例を紹介します。 コード 下記のHTMLファイルを作成します。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <p>SVGの画像です。</p> <img src="logo.svg" width="128"/> </body> </html> 解説 imgタグのsrcにSVGの画像ファイルを指定します。jpegファイルやpngdファイルなどの通常の画像ファイルの表示と同じタグの記述になります。 表示結果 上記の
SVG がうまく表示されない場合は、サーバーの設定を確認してみる – mzmjp.net::blog
いつものように、詰まった作業に関しての個人的な備忘録。今回は、ブラウザで SVG がうまく表示されなかった際には、サーバーの設定を確認してみましょう、というお話。 詰まった箇所 このブログのフッターにある各サービスへのリンクのアイコンを SVG 形式にしてみようと思い、Retina対応にSVGを使う方法とリンクを張る時の注意点 | Dress Cordingというページを参考にローカルで作業。問題なく表示されたので、本番環境（ロリポップ！）にアップしたところ、何故か何も表示されない。フォールバックの PNG ファイルもダメ。ローカルで OK で、サーバー上で NG ということは、サーバー関連の問題かなあと検討をつける。 過程 とりあえず、今利用しているロリポップ！で何かしらの作業が必要かなと思ってググったところ、こんなツイートを発見。 ロリポップでSVGを表示するには、MIMEタイプの設定
【.htaccess】SVGまたはSVGZ画像が表示されない時に確認すべき設定。
その便利さゆえに、近ごろ爆発的に普及しつつある「SVG画像」または「SVGZ画像」ですが、サーバー環境によってはブラウザーでうまく表示されないケースがあります。 今日紹介するのは、この「SVG画像」または「SVGZ画像」が表示されない時の解決策です。 ちなみにSVGとは「Scalable Vector Graphics」の略で、XML言語をベースに書かれた画像フォーマットのことです。 これまで使われてきた「JPEG」「GIF」「PNG」のような、所謂「ビットマップ」タイプの画像と異なり、画像データを座標や図形で扱う「ベクター」タイプの画像なので、拡大・縮小しても描画が荒くならないため、Retinaディスプレイ対応サイトなどでは頻繁に利用されています。 ファイルの拡張子は「.svg」または「.svgz」となり、「.svg」をgzip圧縮してファイル容量を小さくしたものが「.svgz」になりま
SVGをcss/jsで操作するときに知っておきたいこと - Qiita
はじめに ※SVG初心者向きの記事です SVGはスケーラブルでベクターなグラフィックスです。レスポンシブや高解像度ディスプレイに対応する時にはとても頼もしい存在です。htmlと同じようにcssやjsでの制御も可能なため、インタラクティブなコンテンツもお手の物です。 そんなSVGは表示だけであれば簡単ですが、cssやjsを利用する際には知っておきたい基本知識があります。 これ以上、私のように時間を浪費してしまう哀れな子鳥たちを増やさぬようメモしたいと思います。ｱｰﾒﾝ 目次 表示のさせかたに気をつけろ！ cssに気をつけろ！ fill: none;に気をつけろ！ viewBoxに気をつけろ！ jQueryに気をつけろ！ サーバーの設定に気をつけろ！ 表示のさせかたに気をつけろ！ SVGの表示方法は複数あります。 <img>のsrcでファイルを読み込む background-imageプロパテ
IE・EdgeでSVG画像が表示されない時に気をつけるポイント - WEBサイト制作の勉強
もちろんIE11もEdgeもSVG形式の画像をサポートしているので表示自体は問題なく出来ますが、やはりSafariやChromeなどでは問題無く表示されるのに、IE11とEdgeでは表示されない、もしくは形が崩れている、なんて事が良くあります。 その場合に気をつけて欲しいポイントはSVGタグ内の「width」と「height」の記述です。 SVGの書き出し方によってはSVGタグ内の「width」と「height」が省略されてしまう場合があります。そういったSVGデータをIE11やEdgeで見ると、大きさが極端にずれていたり、表示されなかったり、という事が起こります。 このように「width」と「height」の値が省略されている場合は、追加で記述しましょう <svg x="0px" y="0px" viewBox="0 0 512 512" style="width: 256px; hei
サンプルコードで学ぶ SVGの読み方、書き方 (1/2)
SVGの概要から基本的な使い方、Web制作での活用方法までをじっくり解説する本連載。前回はSVGができることをおおまかに解説しました。今回は、SVGの仕様をもとに、SVGの書き方、読み方の基礎を学びます。 SVGを描く、そして書く SVGは画像であり、コードを書かずとも、ツールで描けます。例えば、Adobe IllustratorやInkscape、Sketchなどのドローソフトを使えば、画面の操作のみでSVGファイルを作成できます。 ドローソフトを使って用意したSVGファイルは、HTMLでimg要素、あるいはCSSの背景画像などとして読み込むことで、手軽にWebページの一部として表示できます。 <img src="example.svg" alt="" width="600" height="400"> .example{ background: url( example.svg );
imgタグで埋め込んだSVGが表示されない
imgタグを使ってSVGを埋め込んだ時にうまく表示されないことがあったので、その際の対応方法をメモしておきます。 サンプルコード 次のようなSVGを埋め込んでみます。 test.svg <svg width="50" height="50" viewBox="0 0 50 50"> <rect width="50" height="50" x="0" y="0" fill="blue" /> </svg> 直接HTMLに埋め込む方法と合わせて試してみます。 HTML <img src="test.svg"> <svg width="50" height="50" viewBox="0 0 50 50"> <rect width="50" height="50" x="0" y="0" fill="blue" /> </svg> 直接埋め込みの方は表示されましたが、imgタグで埋め込んだ方は
HTML5でのSVGファイル操作のおさらい - Qiita
最近、HTML5でベクターグラフィックスを取り扱う時にSVG形式のファイルを利用しているWEBサイトが増えて来ている。iOS系のデバイスが超高解像度のRetinaディスプレイを採用しているので、PCサイト向けに準備した800×600や1024×740といった大きめな画像でも、Retina端末で見るとぼやけてしまうという状況になったのが原因かもしれない。この状況でRetinaディスプレイでも綺麗に見れる高精細な画像を提供しようとすると、今度はファイルサイズが肥大化して、トラフィック側に悪影響が出るというジレンマに悩まされる。それらを解決すべく利用が進んだのがSVG形式のベクター画像だ。 数年前、SVGGirlとかいうコンテンツが流行っていた時は、まだSVG形式のファイルを利用できるブラウザが少なかったんだが、今どきのモダンブラウザは普通の画像ファイルと同じ感じに簡単に取り扱えるようになった。
第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
画像ファイルなしCSSだけでSVGを表示 – webdev
スタイルシートだけでSVG画像を表示する方法です。 画像ファイルを読み込んで表示するのではなく、SVGのコードをBase64でエンコードしてソースに直接埋め込みます。 古いブラウザでは表示できませんので、ご注意を。 × InternetExplorer 8 以下 × Android 2.3 以下 メリットは、ページ読み込み時のリクエストを減らせること デメリットは、一見なんの画像を貼り込んでいるのかわからないので、うまく管理しないとカオス化すること…です。 実際のコードはこのようになります。 当ブログの開発環境アイコンに使っているパソコンが表示されています。 <div class="sample"> </div> .sample:after { content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZ
SVGをレスポンシブに対応する
SVGをレスポンシブに対応させる際に少し手間取ったので、対応方法をメモしておきます。 うまくいかなかった場合 まずはうまくいかなかったコードです。 HTML <div class="contents"> <svg width="400" height="400" viewBox="0 0 400 400"> <circle cx="200" cy="200" r="200" fill="#ccc" /> </svg> </div> CSS .contents { max-width: 400px; margin: auto; } .contents svg { width: 100%; height: auto; } SVGにwidth: 100%; height: auto;でいけるかと思ったのですが、IEでうまく表示できていませんでした。 SVGのレスポンシブ対応でうまくいかなかった場
Web Center Features - SVG - Manual Download
アドビは世界を変えるデジタルエクスペリエンスを提供しています。アドビのクリエイティブ、マーケティング、ドキュメントソリューションは、新進アーティストからグローバルブランドまでのあらゆるデジタルコンテンツを適切なタイミングで適切な人に提供することで最高の結果の実現を支援します。 ホーム 製品 SVG Scalable Vector Graphics SVG Tools Download Area 手順 Adobe® SVG Viewerは、お使いのWebブラウザでSVGをレンダリングするためのプラグインです。Adobe Illustrator®では、SVGを直接書き出すことが可能です。 現在の実装版では、バージョン３のブラウザをサポートしておりません。また、Mac版Internet Explorerについては、静止SVGのみサポートしております。ご注意ください。 プラグインの動作確認には、こ
IEやEdgeでSVGのサイズが変わってしまう問題の解決法！ | 株式会社キャッチボール・トゥエンティワン
こんにちは！ 以前編集長キックを受けていました。編集者Mです！ 今回はSVGでつまづいたことがありますので、 その問題の解決法を皆様にシェアしちゃいたいと思います！ SVGってすっごく便利ですよね！ ベクターデータで作られている画像なので、 jpgやgifなどと違ってどんなに大きく引き伸ばしてもキレイに表示してくれるんです！ しかも軽い！ ですが、そんなSVGにも落とし穴がありました。 IEやEdgeだとうまくサイズを調整できないッ！！！ 今回はアイコン付きの見出しを作っちゃおうと思い、 backgroundでSVG形式のアイコンを指定し、 background-sizeでアイコンの大きさを指定していました。 HTML
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
javascript - 表示 - svg レスポンシブ
SVGをimgで表示した場合にIEだけサイズが変になる現象を直す - Qiita
