SVG アイコンの表示に mask-image CSS プロパティを使用する
SVG アイコンの表示に mask-image CSS プロパティを使用する 2024.06.15 mask-image プロパティは CSS でマスキングを行うためのプロパティであり、SVG アイコンを表示する際に有用です。mask-image プロパティを使用することで、外部の SVG ファイルを読み込みつつ、アイコンの色を CSS で指定することが可能になります。 HTML でロゴやアイコンを表示する時、SVG はよく使われるフォーマットです。SVG はベクター形式で記述されるため、拡大・縮小しても画質が劣化しないという特徴があります。SVG を HTML で表示する場合、以下のような方法が使われていました。 <img> 要素の src 属性に SVG ファイルのパスを指定する <svg> 要素を直接記述する svg スプライトを使用する それぞれの方法にはメリット・デメリットが存在
ゲームパッド・キーボードなどの入力ボタンアイコンが800種以上詰まった『Input Prompts』、Webサイト「Kenney」で無料公開｜ゲームメーカーズ
入力ボタンのアイコンパック『Input Prompts』、Webサイト「Kenney」で無料公開 各種コンシューマー機のゲームパッド、キーボード・マウスといった入力ボタンのアイコンが収録されている SVGファイル、サイズの異なる2種のPNGファイルで用意 ゲーム開発用素材の配布やゲームの公開・販売などを行うWebサイト「Kenney」にて、ゲームパッドなどの入力ボタンのアイコンがセットになったパック『Input Prompts』が公開されました。 Input Prompts are now available! Contains 800+ glyphs for common input types, including overlays and generic controls. Includes PNG (64×, 128×) and SVG, plus an overview of a
CSSで色変更もできるSVGアイコンを使うための3ステップ
こんにちは。みみほくろです。 Webデザインでアイコンをつけたいとき、何を使いますか？ 画像を読み込む、疑似要素を使って描画などがよくある方法かと思いますが、今回はSVGを使ったアイコン表示について紹介します。 SVGとは SVGはWebに適したベクターファイル形式の画像フォーマットの一つで、拡大縮小してもPNG画像やGIF画像のように解像度を損なうことがないという大きなメリットを持ちます。 また、図形をテキストで情報を保持しているため、ファイルサイズが小さく、テキストとしてSEO的にも効果があることもメリットの一つです。 ただ、写真のような複雑な画像には適していないので、アイコンのようなシンプルな画像に使うことが主な使用用途になります。 SVGの中身を見ると、簡単な図形であっても一見複雑なためにかなり取っつきにくく感じると思います。が、基本的に内容を大きく変えることはないので、画像自体の
Figma×SVGatorでつくるSVGアニメーション - necco note | necco inc.
今回はFigmaとSVGatorを使ってアニメーションを作る方法をご紹介します。 手軽にアニメーションを作成してみたいと思った時に触れたSVGatorですが、アニメーションの知識があまりない、私でも簡単に作ることができました。 Lottieアニメーションをつくりたい！という方は、下記の記事もおすすめです。 After EffectsとLottieを使ったアニメーションについて、モーションデザイナーの田口さんが記事を書いています。ぜひ合わせてご覧ください。 ウェブサイトやアプリで使えるLottieアニメーションの基本。作成方法や注意点などを解説 Lottieアニメーションの作成に必要な「Bodymovin」のダウンロード・インストール方法 使ったきっかけ 私が入っているコミュニティで、「SVGatorの有料プラン1ヶ月使えるけど使ってみる？」と声をかけていただいたことがきっかけでした。 SV
ずぼらな私の2023年のファビコン事情（SVGでダークモード対応）
2023/05/03: 下部にさらにズボラな案を追加、FAQも追加しました。 デモサイトを作りました。リポジトリはこちら。 favicon（ファビコン）てなに？ みんなだいすき、ブラウザのタブの妖精、この小さいアイコンたちです。 サイトに設定されているファビコンをチェックするには Chrome だと Favicon Detector 拡張を使うと便利。ぜひインストールしていろんなサイトを見てみてくださいね！ こちらは Spotify のファビコンを Favicon Detector 拡張でチェックした例です。 ところでファビコン、こんなにいる？ つらつらと…長い…全部いるのこれ？ <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-tou
あなたのWeb制作をサポートしてくれるWebツール13選 | BUILD Journal
あなたのWeb制作をサポートしてくれるWebツール13選Update2023.05.24Release2023.04.28Tools HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze – CSS Gradient AnimatorFuzeグラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト
CSSのoffsetプロパティで、楽しいパスアニメーションを作ろう - ICS MEDIA
offsetプロパティは、パス上に要素を配置・移動させるCSSのプロパティです。animationプロパティやtransitionプロパティと組み合わせることで、手軽に一見複雑そうなアニメーションが作れます。 SVGやJavaScriptは詳しくないけど、複雑そうな動きのアニメーションを作ってみたい方、animationプロパティなどのおさらいをしておきたい方にオススメの記事です。 サンプルを別ウインドウで開く ソースコードを確認する offsetプロパティと対応ブラウザについて offsetプロパティは、任意のパス上に要素を配置・移動させる一括指定プロパティです。以下の5つのプロパティが指定可能です。プロパティの詳細については、MDNのドキュメントをご参照ください。 offset-path：要素を配置・移動させるためのパス。（MDN） offset-distance：offset-pat
2024年版、ファビコン画像の作成方法と設置方法、さまざまなデバイスに対応させるには6種類のファイルが必要
最近のデバイスやブラウザに対応させる最小限のファビコンセットには、6種類のファイルで対応できます。ブラウザはもちろん、スマホやタブレットにも対応し、さらにSVGも含めて6種類だけです。 ファビコンに必要な6種類のファイル、ファビコンの設定方法、ファビコン画像を作成する方法について紹介します。 How to Favicon in 2024: Six files that fit most needs by Andrey Sitnik Sitnik氏は、PostCSS, Autoprefixer, NanoIDの制作者です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2024/2/28: 元記事がアップデートされたので、当記事もアップデートしました。 はじめに ファビコンの設定方法 -ショートバージョン ファビコンの設定方法
実装の仕組みが分かれば簡単！画像の一部を切り取るカットアウトを実装するCSSとSVGのテクニック
Webページやアプリで見かける、通知や注目の役割を担うカットアウト（画像の一部を切り取る）を実装するCSSとSVGのテクニックを紹介します。 画像に小さなバッジをつけたり、画像をグループ化する際に重ねたり、ヘッダやヒーローで画像を重ねたり、さまざまなUIで見かけます。 Thinking About The Cut-Out Effect: CSS or SVG? by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 カットアウトとは アバター画像で見かけるカットアウト カットアウトの実装 1: clip-pathを使用する カットアウトの実装 2: CSSのマスク カットアウトの実装 3: SVGのマスク アバター画像を重ねるカットアウト カットアウトの実装 1: clip-pathでマスク カットアウ
SVGでやることのまとめ。
SVGは、Webサイトの中では、アイコンやロゴやシンプルなイラストに使われている、拡大してもずっと綺麗な画像ファイルです。画像フォーマットでありながら、XMLに基づくマークアップ言語でもあるので、テキストエディタで編集できてしまえるのも魅力。しかもずっと綺麗なんです。 そんなSVGファイルを作るときに僕がよくやることをちょこちょこまとめてゆきます:)。 書き出しはイラレから XMLに基づくマークアップ言語とはいえ、複雑な図形やイラストは、人力では到底マークアップできません…X‹。 図形やイラストはAdobe Illustrator（以下、イラレ）で制作して、そのままイラレから、SVGファイルとして書き出すことが常です。 ここでは、このサイトの左上にいるパンちゃんアイコンを書き出してみます:)。 イラレのデータを用意 まずは何はなくともaiデータを用意しなくちゃいけません。 「新規...（⌘
【SVG】続・ちょっとだけSVGを試してみる【文字入れ】 - Little Strange Software
どうも！LSSです！！ 先日の記事、 が色々と興味を持っていただけたようで^^ tn198403s.hatenablog.jp カメさん(id:tn198403s)は早々にコードコピペを試していただいた上に、色を変えたり記載順を変えたりして、絵本仕立てにまでなりました！ arsinput.hatenablog.jp アーシさん(id:arshii)はググって他のSVG要素も試みておられます。 先を越された！！ｗｗｗ カメさん、アーシさん、言及ありがとうございます^^ というわけで、LSSも続きをやってみる事にしました！ まず、こないだ作った画像 文字を入れてみました 試しにCSSプロパティを足して… 線を引いてみる ベジェ曲線 三次ベジェ曲線もやってみます 作った波線パスに沿って文字を入れる大技！ あとがき まず、こないだ作った画像 コード <svg xmlns="http://www.w
任意のSVGアイコンを一括で管理、スタイルの変更、エクスポートできるSVGマネージャ兼エディタ・「Norde Source」 - かちびと.net
動作テスト シンプルなUIです。デフォルトではFeatherやFontAwesome、IoniconsなどオープンソースのSVGアイコンセットを配布するプロジェクトが項目に入れられており、その場でアイコンセットを作る事が可能となっています。ついでにOpen Peepsも入れられtました ↑ 勿論、+ADDから任意のアイコンを複数選択して、管理、一括でスタイルを変更する事も可能です。任意のセット名にしたり検索も出来るように。 ↑ エクスポートはSVG、PNG、JPGなどのお馴染みの拡張子からWebPやVeu.js向けなども用意されています ↑ Open Peepsなどのように複数カラーを使用したアイコンセットでは、同じカラーの箇所を一括変更できるので統一されたスタイルが破綻する心配もありません シンプルで扱いやすいのでSVGを管理しやすくなるのではないかなと思います Norde Source
SVG形式のファビコンを設置しよう
2022年4月27日 SVG, Webサイト制作 つ・い・に！ファビコンもSVG形式が対応されるようになりました！SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要はありません！やったね！少し工夫すればダークモードにも対応できますよ！さっそくみていきましょう！ ↑私が10年以上利用している会計ソフト！ SVGファビコン設置方法 1. SVG形式のファビコン用画像を用意 グラフィックツールでファビコンにしたい画像を用意します。サイズは特に気にしなくてもOK。正方形であればどのサイズでもきれいに表示されます。今回はIllustratorを使って32x32pxのものを用意しました。 SVG形式で保存します。 2. HTMLファイルに記述 あと
使いまわせるSVG
ロゴとかアイコンとかシンボルとか、Webサイトの中のいろいろなところで使われていて、それでいて色違いも必要だったりする小っこい画像たち。みるみる増えてしまってもう仕方ないですね…X(。そんな小っこい画像をひとまとめに管理できる、SVGスプライトについてまとめます。 アイコン一式SVG バラバラのアイコンたちをひとまとめにして、取っ散らかった画像フォルダをスッキリ片付けちまいたいXO！ ということで、例えば、ボタンの矢印とかアイコンとか、ロゴとかシンボルとか、Webサイトの至るところに蔓延（はびこ）る小っこいアイコンを、ひとつのSVGファイルに詰め込んで使いたいやつだけ表示させるやつのつくり方をまとめます。 仕組み 「SVGでやることのまとめ。」という記事で紹介したuse要素を使います。 ひとつのSVGファイルに、アイコンぜんぶを詰め込んで、それぞれにid属性を割り振れば、use要素でお目当
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タグで埋め込んだ方は
書いて覚えるSVG: 基礎編
この記事のターゲットとなる方 この記事は、「HTMLを書いたことがある方」や「Illustratorを使用したことがある方」向けにSVGの書き方の初歩を解説しています。 記事を読むだけでなく、PCで「CodePen」というオンラインのテキストエディターを開き、SVGを書いていくことでより深く理解できるようにしています。 ぜひ記事を読みながら一緒に書いてみてください。 SVGは他の画像形式と何が違うの？ この記事をご覧の皆様は「SVG」をどのようなものだと思っているでしょうか？ たとえば、JPEGやPNGと同じような「Web用の画像形式の一種」だと思っていらっしゃる方もいるかもしれません。 しかし、SVGはJPEGやPNGと明確に違うところがあります。 SVGファイルの中身はテキストデータであり、HTMLやCSSのようにテキストエディターを使って編集したり、新規制作したりすることができます。
UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ - ICS MEDIA
SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考「SVGで始めるマイクロインタラクション入門」）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法（コーダー向け） コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
池田 泰延 on Twitter: "SVG画像。あるあるなトラブルまとめ。 https://t.co/mzHOMADCye"
Pattern Monster - SVG Pattern Generator
Find, customize & generate common SVG icons for your project
