SVG形式のファビコンを設置しようつ・い・に！ファビコンもSVG形式が対応されるようになりました！SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要はありません！やったね！少し工夫すればダークモードにも対応できますよ！さっそくみていきましょう！ クリエイティブなファビコンを設置しよう SVG ファビコン設置方法1. SVG 形式のファビコン用画像を用意グラフィックツールでファビコンにしたい画像を用意します。サイズは特に気にしなくても OK。正方形であればどのサイズでもきれいに表示されます。今回は Illustrator を使って 32x32px のものを用意しました。 SVG 形式で保存します。 2. HTML ファイルに記述あとはこれ
Browser unsupported Here at Eden we decided to make sure we gave the best possible experience to mobile browsers. This means we reduce our javascript load by removing extra workarounds for browsers like IE. Unfortunately your browser didn't make the cut. Please upgrade your browser for the best viewing experience.
SVGアニメーションの基礎 SVGには非常に強力なアニメーション機能が実装されており、図形のほとんどの要素に対して時間的変化を与えられます。座標や色のような数値属性のみならず、stroke-linecapのような文字列を指定する属性やパスの形状さえもアニメーションの対象になります。強力なだけに使い方も多岐に渡るので、以降2ページに渡ってSVGのアニメーション機能を解説します。 SVGでは、主にanimate、animateTransform、animateMotionの3つのタグでアニメーションを実現します。中でもanimateは基本となるもので、図形タグが持つほとんどの属性を制御できます。以下に使用例を示します。 上記のコードでは、2つのanimateタグがそれぞれ異なる方法でアニメーション対象の要素を指定しています。1つ目のanimateタグにはxlink:href属性あり、この場合は
当ブログでも最近、SVGの素材を紹介することが多くなりました。そんなSVGファイルから不要なデータを取り除いて軽量化するアプリを紹介します。 ↓は、今日紹介したアイコンのSVGを軽量化したものです。 ほとんどのファイルが50%以上軽量化されました。 SVGO GUI SVGO GUIは、Node.jsベースのSVG軽量化ツール「SVGO」をGUIで操作できるようにしたもので、Windows用とMac用が揃っています。 使い方は非常に簡単で、Mac用で説明します。 ダウンロードしたSVGO GUIをダブルクリックして、起動します。 SVGO GUIの起動画面 あとは、このパネルにSVGファイルをドラッグするだけでOK！ ※軽量化は元ファイルに上書きするため、元ファイルが必要な時はファイルをコピーしてから利用してください。 SVGファイルの軽量化、完了！ 軽量化しても、グラフィックのクオリティ
［Web用に保存］は、Illustrator CS5までは［Webおよびデバイス用に保存］ SVGの書き出しはIllustrator CS5までは［Webおよびデバイス用に保存］内にあったが、Illustrator CS6では［別名で保存］のみに。［Web用に保存］に復活するのが望ましいと思います。
SVG はモダンなWebブラウザーで表示できるベクター画像形式で、Retina ディスプレイや、タブレットでピンチアウトで表示拡大した時にも荒く見えないため、これから使用する機会が増えそうな画像形式です。 SVG は Illustrator で書き出すことができますが、これまで Photoshop ではプラグインなどを使わなければ SVG を書き出すことができませんでした。 しかし、Photoshop CCの「画像アセット」機能を使用して SVG を書き出す裏技を見つけたので紹介します。 準備 下記のファイルをダウンロードします。 Macの場合 Finder でメニューの［移動＞ホーム］を選択し、ホームフォルダを表示します。 そこに、generator.json ファイルを移動またはコピーします。 Windowsの場合 ユーザーフォルダ（ユーザー名のフォルダ）に移動します。 そこに、gen
Ready to use SVG icons for the web. Choose an icon. All you have to do is copy & paste the HTML code. Don't forget to load the basic CSS file. <path fill="none" d="M15.439,23.783c-4.852,0-8.784-3.932-8.784-8.784c0-0.423,0.038-0.835,0.095-1.242l1.837,1.837 c0.358,0.358,0.939,0.358,1.298,0s0.358-0.939,0-1.298l-3.436-3.436c-0.186-0.186-0.43-0.271-0.673-0.264 c-0.244-0.007-0.488,0.078-0.674,0.264L0.79
Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. It’s been a week since we launched our quick Code Challenge #1, which means it’s time to announce a winner! It was tricky. While the quantity of entries wasn’t high, there’s no questioning the quality of our wi
Chrome DevTools Chrome DevToolsはHTMLやCSS、JavaScriptのデバッグを行うツールです。これを用いて、その場でHTMLやCSSなどの実際にブラウザが表示しているファイルの更新を行うこともできます。 HTMLやCSSの編集を実際に表示しながら行うことができるのは大変便利ですし、その結果をファイルに直接反映することもできます。 Workspaces - Persistent authoring in the DevTools [Chrome] DevToolsのWorkspaceでローカルプロジェクトをライブエディット&デバッグする DevToolsでSVGの簡易編集 実は、このDevToolsでSVGの生ファイルを扱うことができます。 たとえば、この有名なSVGファイルを開いているとします。 ここでこのSVGの特定範囲を選択し、[要素を検証] でDe
ばうあーろぐ IT / Web に関するメモ、あるいは Twentyfour あるいは人生の diff 2025/02/22 2025年にもなって VPS を再び借りましたのメモ tech Ansible nginx HTTPS VPS 2024/12/06 Bluesky 公式アカウント移行まとめ・2024年活動振り返り tech Bluesky Notion 2024/06/29 Windows 11 のことを調べ出したら CPU/GPU のことを全然理解できてなかったことが分かった話 tech Computer GPU 2024/06/07 Notion で一括置換する方法 tech Notion 2024/04/21 Infinity Table を作ろう！ tech Fab Fusion360 最新5件（tech）以外の記事は、下のカテゴリ一覧から探してね
先日AdobeからこのようなJavaScriptライブラリが公開されました Snap.svg http://plus.adobe-adc.jp/post-4817/ 以前から人気の高かった、IE6でもSVGを表示できるJavaScriptライブラリRaphaelの作者 Dmitry Baranovskiy氏による新たなライブラリで、Raphaelとの違いはSnap.svgではIEなら9以上対応とモダンブラウザを対象にしたこと。さらに自由度と表現力の高いことができるようになっているのが大きな特徴です。 こうしたJavaScriptライブラリがオープンソースで、そしてAdobeから公開されたのは大きなことでこれからSVGもどんどん普及していくのではないでしょうか。 まさに2013年こそついにSVG元年と言えるかもしれません*1。 ……とは言え、そもそもSVGってなに？という人もまだまだ少なくな
イラストフォント配布サイト作りました！ Bootstrapを使って新しいサイトを作ってみました！ 案件で検討する前に一度テストしておきたかったので 今回Bootstrapを使ってサイトを作成してみました。 スタンプフォント！ -スタンプみたいに使えるかわいいイラストのフリーフォント- イラストをフォント化したTTFフォントの配布サイトです。 Windows、Mac OS X以降で使えます。 Webフォント用のファイルも準備予定です。 個人、商用ともにフリーです。 ご自由にお使いください^^ 自分で好きなものだけWebフォント化していただいても大丈夫◎ デザインの一部や、ワイヤーフレーム作成時などにお役立ていただけると嬉しいです。 こういうのがあると便利ー！などのご意見もお待ちしています！！ Font用のSVGファイルはFireworksで ちなみにサイトのデザイン、アニメーションGIFの作
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 3日目は、スマホ環境であればHTTPリクエストを減らすためにWebフォントの採用を考慮しても、やぶさかではないだろう。 まずは下記の画像をご覧頂きたい。 これはプロジェクトで私が使用していたスプライト画像だが（実際は縦にして使用）、このような単純な形状、単色のアイコンであれば、Webフォント化したほうがなにかと都合がよい。 このスプライトであれば、カラー × 矢印の向き × シャドウの有無 パターンの可能性があり、スプ
はじめに こんにちは、クラスメソッド株式会社でWebを担当している野中です。前回はWebサイトの高速化を行うにあたり知っておきたい「HTTPの仕組み」について紹介しました。 HTTPの仕組みについて何となく理解できたでしょうか？ この連載で紹介していく高速化テクニックの解説を理解するために必要ですので、都合の良い時に読んでおいてください。 「いつ読むか？ 今でしょ！」なんてね（笑） もう古いですね。 対象者 この記事では、特にWebデザイナーを対象としています。 フロントエンドエンジニアの方はWebデザイナーから受け取ったPSD（Adobe Photoshop Data）ファイルや、AI（Adobe Illustrator Data）ファイルから画像を書き出すこともあると思うので、その際の参考にしてください。 Webデザイナー フロントエンドエンジニア Webディレクター Web担当者 ビ
高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表
XMLmind DITA Converter v2.4 を使うと、DITAからEPUB3が簡単に作れることが分かったので、いろいろ試していました。 EPUB3では図にSVGが使えます。SVGが使えると、EPUB3でマニュアルを作るときのいろいろな問題が解決できるので、とても期待しています。 EPUB3へのSVG挿入でハマったというか、分かったことが２つ。 手元にはiPad miniしかないので、iBooks(v3.1)以外では未検証です。 図のサイズの指定 図を画面いっぱいに表示させるには、以下のようにCSSを書くとよい。 .image.max-width { max-width : 100%; height : auto; } ビットマップとベクターを組み合わせたSVGを挿入するときはをインラインで書く これは解せない挙動なので、私がまだよく分かっていないことがあるのかもしれません。ご存
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
