シンプルなものからかわいいものまで、ベーシックなパターンが揃ったSVGフォーマットの背景素材を紹介します。インラインSVG、SVGファイル、Figma用が揃っており、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でマスク カットアウ
この記事では、Webデザイン制作の面倒な作業を楽にこなす、便利なSVGツール53個をまとめてご紹介します。 背景テクスチャやSVGシェイプから、オンラインSVGツールやSVG最適化ツールなど、SVGにまつわるあらゆるツールを揃えています。 新しいツールが見つかり次第アップデートしていく予定なので、ブックマークしておくと良いかもしれません。 Web制作の面倒な作業をラクにするCSS便利ツール87個まとめ Web制作をもっと楽に!便利なSVGツールまとめ Haikei ユニークなSVGシェイプや背景、シームレスパターンを作成できるオンラインツールで、グラデーションや波ウェーブなど基本的なシェイプはほぼ揃います。 配色やサイズなど、本格的なカスタマイズができるのも特長で、作成したデザインはSVGやPNGファイルとして無料ダウンロード可能です。 Cool Backgrounds お好みの配色をつか
こんにちは。koyaです。 今回は「コロナに負けない!シーブレイン的、withコロナ時代の楽しみ方」でも使用したSVG画像の使い方について説明をします。 svgを使用した理由 今回は牛の肉の部位毎にマウスホバーの判定が欲しかったため、svgを使用しました。 もしpng画像を使用すると、透過された部分にも画像の判定が入ってしまいます。 その点svgを使用すると動画のように見た通りの範囲のみ判定があるため、今回のようなケースではsvgを使用します。 svg画像の出力 今回はAdobeXDを使用したsvg画像の出力を行います。 書き出す際の設定は下の画像のように 形式→svg スタイル→内部CSS 画像を保存→リンク と設定します。 ファイルサイズの最適化については、ファイルサイズを縮小したものは改行が消えたり、pathのidが消えてしまうのでもしコードを参照する場合はチェックを外した方が使いや
SVGXはSVGの編集や最適化、変換、管理や検索が可能なSVG管理デスクトップアプリです。Win、Macの両OSに対応しています。Electron + Svelteで作られているようです。 端末内の任意のSVGのプレビューや拡大/縮小、コードのライブ編集、URLエンコード、CSS用コード変換、検索が可能な他、ブックマークや履歴なども利用できる様になります。 実際使ってみた感想ですが、個人的にはかなり便利に感じました。特に検索機能と変換、最適化機能など欲しかった機能を1つのアプリで使えるのは嬉しいです。自分自身、ファイルの整理整頓がやや苦手なので助かりました。今のところ、そのまま使い続けるつもりです。 本題とはあまり関係ないのですが、このSVGXが少し変わった配布手法を取っていたのでメモ代わりに。 SVGXはオープンソースでもなく有償ライセンスでもない、Gitwareという配布スタイルを取っ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SVGを作成する場合、Illustratorなどのドローアプリケーションを使ってSVG形式でエクスポートするのではないでしょうか。SVGを直接作成、編集できるソフトウェアはあまりないように思います。 そこで使ってみたいのがSvgPathEditorです。SVGをWebブラウザ上で作成、編集できるソフトウェアです。 SvgPathEditorの使い方 メイン画面です。 マウスでドラッグして編集できます。 パスの追加や描画の種類を変更できます。 プレビューです。 コマンド一覧から、描画している範囲を可視化できます。 保存機能もあります。 SvgPathEditorを使えばSVGをWebブラウザ上で手軽に加工できます。最初はドローアプリケーションでもいいですが、その後のちょっとした編集は
Emblemiconsは1000以上のアイコンをセットにしたOSSのアイコンパックです。それぞれSVG、背景有りSVG、PDF、PNGが6サイズ、JPGも6サイズ用意されており、全てがMITライセンスの元で公開されています。 アイコンはプレゼンや設計、開発などビジネスで利用できるものが中心に揃えられているそうです。 また、Figma向けのアイコンも用意されており、こちらも無料で利用する事が出来ます。 様々なデジタル製品で一般的に頻繁に使われるようなアイコンを作って世界中で共有するのがこのプロジェクトの目的だそうです。全てのファイルはGithubでも公開されています。ライセンスはMITとの事です。 EmblemiconsOn Github
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く