デジタルビジネス部所属Webデザイナーの黒須です。 SCSSを利用して、CSS（background-image）にSVGファイルを指定し、SVGらしくアイコンの色変えをサッと実現する方法を紹介します。 1. SVGファイルを最適化 見た目は問題がなさそうなSVGファイル… しかし 隠れた不要なレイヤー要らない空パスパスが閉じていない など、データとして問題がないかチェックします。 Illustratorで作業 不要な隠しレイヤーなどを全て削除パスをアウトライン化同じ色は複合パスでまとめる（cmd + 8） 複合パスの必要性 同じ色（fill1つで指定）のパスは1つにまとめます。 また複合パスでまとめることでデータを軽量化できます。 必要な物だけ残しシンプルでわかりやすいデータを目指します。 例えばこのような2つの＞の字でデザインされた矢印アイコンは、複合パスにできます。 複合パスにせず
こんにちは。みみほくろです。 Webデザインでアイコンをつけたいとき、何を使いますか？ 画像を読み込む、疑似要素を使って描画などがよくある方法かと思いますが、今回はSVGを使ったアイコン表示について紹介します。 SVGとは SVGはWebに適したベクターファイル形式の画像フォーマットの一つで、拡大縮小してもPNG画像やGIF画像のように解像度を損なうことがないという大きなメリットを持ちます。 また、図形をテキストで情報を保持しているため、ファイルサイズが小さく、テキストとしてSEO的にも効果があることもメリットの一つです。 ただ、写真のような複雑な画像には適していないので、アイコンのようなシンプルな画像に使うことが主な使用用途になります。 SVGの中身を見ると、簡単な図形であっても一見複雑なためにかなり取っつきにくく感じると思います。が、基本的に内容を大きく変えることはないので、画像自体の
SNSやブラウザ、CMS、ソフトウェア、AIなど様々なサービスのロゴをSVGのアイコン形式でコピーまたはダウンロードすることができる「Svgl」がとても便利に活用できそうだったのでメモ書きとして紹介します。 A beautiful library with SVG logos – Svgl A beautiful library with SVG logos – Svgl 各サービスのロゴはSVG形式でコピーまたはダウンロードすることができます。 「Svgl」では下記のジャンルに分かれた形で様々なサービスロゴが400種類以上も提供されています。 ※2024年5月28日現在 ・AI – 人工知能 ・Browser – ブラウザ ・CMS – コンテンツ管理システム ・Community – コミュニティ ・Compiler – コンパイラ ・Crypto – 暗号 ・Database – デ
Just practical stunning icons for everyone Save your penny and time creating from scratch, use these diverse Icon set to complete your awesome design
Say goodbye to frustration and inconsistency. This icon library empowers you to create a remarkable and seamless user experience. All icons are crafted by hand carefully in Figma and are reviewed individually for optimal visual and code-performance output.
Shape Dividerはヒーローイメージやセクション間で使えそうなSVGのカスタムシェイプを直感的に作れるシンプルなWebアプリです 実際に完成図を見ながらセッティング、作成できるので特別な知識なども不要、ユーザー登録等も必要ありません 作成後は雲のアイコンをクリックすればCSSとHTMLを含むsvgのコードが発行されます。右端にあるデバイスアイコンからは各デバイスの見え方も表示できます。地味に便利ですね Shape Divider
See the Pen SVG Animation by Yukino Watanabe (@yukino0on) on CodePen. おっしゃれー！！！！ やってみたくなったでしょ。 わかってしまえば簡単にできるのですが、検索してもなかなか難しかったので共有致します。 用意するもの Illustratorなどのベクター画像が作れるものHTMLエディタ 私はBracketsを使ってます。AtomとかなんでもOK 仕組み A：表示したいイラストやロゴの“ベースSVG”と B：アニメーションの動きをつける“マスクSVG” という2枚の画像を重ねて、 Aを、Bで隠している状態から、Bが書き順に沿って動くことで あたかも手書きで書いているかのように見せられるものです。 ・・・おっと、じゃあBだけでええやん と思った方。 そうです。パスだけならBだけ使えばいいんですが、 この動きのベースになって
![[ビデオ解説付] CSSとSVGで手書き風のアニメーションを作る方法 | Linksbase](https://cdn-ak-scissors.b.st-hatena.com/image/square/87aaf8cc5446e03c34297c09a6d03276135d0933/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Flinksbase.net%2Fnew%2Fwp-content%2Fuploads%2Fheading.gif)
あるウェブページで次のようなSVG要素が直に埋め込まれていたのを見つけた。 <svg viewBox="0 0 24 24" height="32" width="32" aria-hidden="false" focusable="false" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" aria-label="email" stroke-linecap="round" stroke-linejoin="round"> <path d="..."></path> <polyline points="..."></polyline> </svg> （d属性値やpoints属性値は話の本筋とは無関係なので省略。） この例ではSVG要素に結構な属性が指定されているのだけれども、本当にその属性値は必要な
ディープベクトルエンジン 15年の経験をもとに、ディープラーニングネットワークと古典的アルゴリズムを構築し、Vectorizer.AIのコア機能を構成しています。本サービスを支えるAIネットワークは、当社が独自に開発したデータセットをもとに、ゼロからトレーニングしています。 ベクターグラフ 独自の計算幾何学フレームワークにより、従来のベクトル画像表現では不可能であった自動編集や局所的な最適化を実現。 フルシェイプフィッティング 単純なベジェ曲線だけでなく、複雑な幾何学的形状全体を可能な限りフィットさせ、完璧なフィットと比類ない一貫性を実現します。完全にパラメータ化された円、楕円、丸みを帯びた長方形、星をサポートし、すべてオプションで角を丸め、任意の回転角度をつけることができます。 曲線のサポート 幾何学図形全体に加えて、直線、円弧、楕円弧、2次曲線や3次曲線のベジェ曲線からベクター形状を構
Illustration Kitはクレジット表記も不要で自由に使えるオープンソースのイラスト配布プロジェクトです。 様々なシーンや人物のゆるいスタイルのイラストがすでに大量に公開されており、PNGやSVGでダウンロードできるようになっています。 また、簡易的ですが、DL前に色を変更する事も可能です。イラストは最近よく見るタイプのスタイルで個人的に日本向きでは無い気がしていますが、覚えておいても損は無いかなと思います。オープンソースとの事ですがライセンスは独自ライセンスのようですので利用前にご確認下さい。 Illustration Kit
「SVGBOX」はCDNを利用し、簡単に色のカスタマイズができる4174種類のアイコンを配布しています。 SVGBox https://svgbox.net/ アイコンを探すには、上記のURLにアクセスして「Iconsets」をクリック。 14種類のアイコンセットから好きなアイコンセットを選択。 アイコンの一覧が表示されます。 ここで、色の指定ツールをクリックすると…… カラーピッカーが立ち上がるので好きな色を指定します。 すると、表示されているすべてのアイコンの色が指定したものに変化しました。 アイコンにカーソルを合わせると現れるメニューからアイコンを表示するためのタグを取得することができます。 メニューの上から1つ目「アイコンへのリンクを取得」をクリックすると、アイコンを表示するためのURLが取得できます。ただし、このURLには色指定のパラメータが入っておらず、黒いアイコンが表示されて
What exactly is a displacement filter? In this article, Dirk Weber explains the SVG feDisplacementMap filter primitive with a good number of examples to demonstrate the concept of animated displacement maps. Even today, the magic, wicked realm of SVG Filter Effects is largely uncharted territory. The art of SVG filtering is still surrounded by an aura of alchemy: you have to bravely dive into a da
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! For years, my pain has been not being able to create a somewhat natural-looking pattern in CSS. I mean, sometimes all I need is a wood texture. The only production-friendly solution I knew of was to use an external image, but external images are an additional dependency and they introduce a
画像形式とは ディスプレイ上ではどれも変わりなく見える画像（写真）でも、実は表示されている規格には様々な種類があり、それぞれ特性が違います。 例えば写真に向いた画像形式があれば、色数の少ないイラストに向いた画像形式もあります。が、逆を言えば用途に向いていない使い所もあるということです。 それに加えて最近ではページの表示速度も重要なので、データサイズもなるべく軽く（少なく）なるよう適切に画像形式を選ぶようにしていきましょう。 拡張子が表示されない場合 パソコンの初期設定では拡張子（.jpgなど）が表示されない設定になっていると思いますので「OS名 拡張子 表示」等で検索して、拡張子が表示されるように設定をお願いします。
WordPressでは、デフォルトの状態だとSVGファイルをアップロードすることができません。投稿や固定ページの中にSVGを挿入したくても、アップロードしようとするとエラーで弾かれてしまいます。 SVG Supportは、WordPressでSVGファイルを扱えるようにしてくれるプラグインです。SVG Supportをインストールすることで、メディアライブラリにSVGファイルをアップロードできるようになります。 SVG Supportのインストール インストール手順は以下の通りです。 SVG Supportをダウンロードします。ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。管理画面の[プラグイン]ページで、SVG Supportを有効化します。 SVG Supportの設定 [設定] – [SVG Support]で細かい設定を行えます。
はじめに 仕事で少しSVGを扱うことがあったので、免許証ジェネレータを作ってみました。 制作工数: 2日間(20時間程度) 作ったもの 免許証ジェネレータ 🥳 パラメータを設定して↓のような免許証を生成できます。 使い方 下部のタブから画像やテキスト等を設定して「変更を反映」を押下します。 「画像を保存」からローカルに画像を保存できます。 ソースコード 雑ですが↓に置いています。 免許証ジェネレータの作り方 定数を設定しようと考えましたが、めんどくさくなってマジックナンバーだらけになりました😿 SVGコードのベストプラクティス的なものがよくわかっていないので今後勉強しようと思います。 技術 JavaScriptとHTMLだけです。 JavaScriptでSVGを生成して、HTML要素にappendします。 描画メソッドを作る 線、枠、文字、画像を描画するメソッドを作成します。 座標、大
SVGファイルをカスタムSF Symbolsに変換してくれるMac用ユーティリティ「Custom Symbols」がリリースされています。詳細は以下から。 Appleが公開している「SF Symbols」はSan Francisco(SF)フォントから派生したベクターシンボルで、macOS 11 Big Sur/iOS 14のシステムシンボルに利用しているだけでなく、サードパーティ製macOS/iOSアプリの開発者も利用することができますが、開発者がデザインしたSVGファイルのシンボルをカスタムSF Symbolsに変換してくれるユーティリティ「Custom Symbols」が新たにリリースされています iOS & MacOS devs: My first developer tool is live! It's an app for converting any SVG art into
エムスリーの山本です。趣味で作っていたダイヤ可視化ツールの技術的な側面の話をします。 作ったもの ダイヤ可視化ツールです。時刻表ではありません。鉄道路線を比較するにあたって、本数の多寡や速達列車の比率とか本数の減り方とかが一発で分かるように可視化するものです。何のために必要かというと、鉄オタがダイヤ知見を深めるのに使います。つまりそういうやつです。 たとえばこれは小田急の昼頃の1時間に運行されている列車なんですが、 基本は20分間隔ダイヤ 主要な駅は10分間隔で有効な列車が来るように調整されている 本線は3-6-6-6で優等列車の比率が高い(長距離利用客が多そう) 千代田線の直通はあまりやる気がなさそう などが分かります。実際、新宿駅の利用者数の次に多い駅は町田駅だったりして、相当に長距離の利用者が多いのが特徴の路線です。 また、鉄オタならみんな架空鉄とか想像するのに使ったりするだろうとお
Super Tiny Iconsは各SNSやWebアプリなどのアイコンを全て1KB以下で作られた軽量SVGアイコン集です。 TwitterやInstagram、Tumblrなどお馴染みのSNSやGithub、Slack、dev.toなどエンジニアや開発者向けのコミュニティやツール、YoutubeやVimeoなどの動画プラットフォーム、Googleの各サービス、SkypeやLine、Zoomなど日本でもお馴染みのコミュニケーションツール、他にも各ブラウザやWikipedia、TripAdvisor、DribbleなどのWebサービスなどなど日常生活でよく見るアイコンが大量ｎ揃えられています。 全て1KB以下のSVGフォーマットで設計されており、公式のデザインに沿ったスタイルで揃えられています。各社のガイドラインの関係もありますが有難いアイコンセットですね。ライセンスはMIT。 Super T
サイト閲覧方法 1ウェブサイトへアクセス https://ugokuweb.coco-factory.jp/ugokuweb/ 新サイトはこちらから 2【ユーザー名】と【パスワード】が求められますので、以下の情報を入力してください。 【ユーザー名】：ugokuweb 【パスワード】：指定のページ数を【半角数字3桁】で入力 ・黄色本をご購入の方： 7-2「検索の表紙」ページ数 ・ピンク本（実践編）をご購入の方： 9-4「SVGアニメーションの表紙」ページ数 （例）30ページの場合は 030 と入力 ※ご覧になりたいページ数を入力するのではなく、指定のページ数をご入力下さい。 ※画像と同じページの、左下のページ数をご記入下さい。 3閲覧制限が解除され、サイトを閲覧できるようになります。 ブックマークをしてご利用ください。 ※掲載されているコードは、2021年に出版された時のものをそのまま掲載し
Tabler Iconsはシンプルで使いやすい、オープンソースで提供される汎用的な300以上のSVGアイコンセットです TablerはOSSのシンプルなダッシュボードを提供するプロジェクトで、その一環で今回はアイコンをOSSとして提供してくれています クセも無くさまざまなプロジェクトに使えそうな印象でした
2020.4.25 イラレからSVGで書き出す設定 - パーツ別に書き出す方法 SVG（拡張子svg）は容量が軽く、拡大しても劣化することがないファイル形式です。 Adobe Illustratorのアートボード全体をSVG化したり、個別にパーツ単位でSVGで書き出す方法について書きます。 アートボード全体をSVG形式で書き出す アートボードをSVG形式で書き出すには、メニューバーの「ファイル」 → 「書き出し」 → 「書き出し形式」を選びます。 書き出しのパネルのファイル形式で「SVG（svg）」を選択。 「アートボードごとに作成」にチェックを入れます。 「書き出し」をクリックするとSVGオプションが表示されます。 OKをクリックでSVGファイルが書き出されます。 アウトライン化されていないフォントがある場合 書き出したSVGファイルの文字は、ブラウザのデフォルトフォントで表示されてしま
When I started giving talks about SVG back in 2016, I’d occasionally hear a question I never had a great answer for: What if you have a lot of icons on a page? You see, many attendees were interested in transitioning away from icon fonts. But while SVG offers a more accessible, reliable and powerful alternative, there’s no denying that browsers have an easier time displaying thousands of text char
SVG Splashは任意のSVGに自由に色付け出来るシンプルなデスクトップアプリです 使い方も簡単で色を選んで変更したい箇所をマウスでクリックするだけです。あとはコードをコピーしたりダウンロードしたり 知識が無くてもSVGに変更を加えられるので一定の需要はあるかもしれませんね SVG Splash
This article explores the world of SVG favicons. We cover adding them to HTML, using emojis, inlining them as data URIs, supporting dark mode, and animations. Chinese Version / 中文版 I’ve been working on some side projects recently (Style Check and bedrocss), and as with any project I work on long enough, I got to the point where I wanted to add a favicon. I decided to play around with SVG favicons.
チャートやネットワーク図などを描くのに使われるのがGraphvizです。多くの場合PNGなどの画像で出力して利用しますが、SVGへのエクスポートも可能です。Web向けであれば、画像よりも使い勝手が良いでしょう。 そんなGraphvizで出力したSVGを表示するのがjquery.graphviz.svgです。 jquery.graphviz.svgの使い方 表示しました。 ノードをクリックすると、ハイライト表示されます。 さらにズームイン/アウトができます。 jquery.graphviz.svgはGraphvizのSVGデータに対して、ハイライトとズームイン、ズームアウトを追加します。さらにデータをレスポンシブにしてくれるので、どのデバイスに対しても適切な表示が可能です。 jquery.graphviz.svgはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT L
For the detailed release info, please checkout the release note: https://github.com/naver/billboard.js/releases/tag/3.0.0 TL;DRthe major version changes is mainly to support for D3.js v6new candlestick(OHLC) type support.export() API enhancementsnew subchart APIsD3.js v6 SupportD3.js major release v6 came out August of 2020, with some breaking changes. We were working for the adoption and heard fe
筆ブラシの質感をそのまま再現できるSVGフォントCalifornia Sunriseが、発売を記念して1週間限定の無料ダウンロードキャンペーンを行っています。 デザイン販売サイトCreative Marketの人気フォントデザイナーNicky Laatzによる新作英語フォントで、公式サイトでのみ無料配布されています。 無料ダウンロードできる美しい筆記体やブラシフォントは、以下の記事でも紹介しているので参考にどうぞ。 入力するだけで美しい！筆記体フリーフォント86選 改訂版 商用OKな手描きブラシ無料フォント83個まとめ【5年熟成の秘密レシピ】 【商用可＆無料】2020年上半期ベスト英語・日本語フリーフォント厳選90個まとめ 手書きした筆ブラシのリアルな質感を再現！SVG英語フォントCalifornia Sunrise California Sunriseは、通常のOTF形式のフォントに加え
svg.healthは医療に関するものを中心に500以上のシンプルなSVGアイコンをフリーで提供するSVGアイコンプロジェクトです。 CC-BYで提供されており、クレジットを条件に個人でも商用でも無料で利用できるようになっています。 矢印や動画UI、電話や、メールなど一部は一般的なアイコンが含まれますが、殆どは医療関係が占めており、症状や医療デバイス、医療器具、療法、健康管理、医療従事者、各診療科、歯科向けなどのアイコンが用意されています。 ライセンス的に使いやすいとはなかなか言えないかもしれませんが、医療系素材の多くは有料である事が多いので割と貴重かなと思います。とはいえ歯科素材.comのように最近では無料利用できる医療系素材も増えてはいます。コストを抑えたい医療機関の方はご覧になってみては如何でしょうか。 svg.health
An alternative binary encoded vector graphics format. Why another format? SVG is a horribly complex format and an overkill for most projects. The specification includes way too many edge cases so implementing a new SVG renderer will always have drawbacks or missing pieces. TinyVG tries to be simpler. Fewer features, but powerful enough to cover 90% of use cases. Features Compact binary encoding (3
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. Stefan Judis has a “Today I Learned” (TIL) post explaining how SVGs filters can be inlined in CSS. The idea is that CSS has the filter property which supports some built-in functions, like grayscale(100%) and stuff like that. But it can also point to a filter defined by SVG. So you could do filter:
SvgPathEditorはSVGのパスを作成、操作できるオープンソースのSVGパスエディターです。 実際に完成図を直感的に操作可能で、データが即時反映されます。左ペインからデータを編集する事も可能です。 少し慣れは必要ですが、必要な方には地味に嬉しいアプリかもしれませんね。本アプリはOSSとしてソースコードも公開されています。ライセンスはApache-2.0。 SvgPathEditor
つくったもの svg2png-wasm という名前に全ての情報が入っていますが、 WebAssembly を内部で利用して SVG 画像を PNG 画像に変換することができます。 つくった経緯 SVG のメリット SVG は XML で記述されるベクター画像ですが、以下のような利点があると考えています。 ベクター画像なため拡大してもドットが見えてこない 文字列で構築できるので（文字や図形を中心とした画像を）非常に低いコストで動的に生成できる Markdown で記述されたドキュメント内で表示できる（ついでにアニメーションできる） よく見るこれも SVG svg2png-wasm のアイコンも SVG SVG のデメリット 動的に生成しやすいとなると OGP の画像に設定したくなります（なります）。 ですが、そうは問屋がおろしません。 Facebook のドキュメントによれば、JPEG, G
SVG画像ビューア「Gapplin」がApple Siliconに対応しています。詳細は以下から。 GapplinはCotEditorなどを開発するMineko Imanishiさんが公開しているMac用SVG画像ビューアですが、このGapplinがApple Siliconに対応した「Gapplin v2.0」としてリリースされています。 Gapplin v2.0ではIntelとApple Siliconに対応したUniversal 2 Binaryとなった他、アプリケーションアイコンがBig Sur以降に最適化され、Quick LookプラグインがアニメーションSVGのプレビューに対応しています。 また、今回のアップデートではシステム要件がmacOS 11 Big Sur以上に変更されていますが、アプリは聞き続きMac App Storeで無料公開されているので、SVG画像ビューアをお
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #fff; z-index: -1; } .Paper_v2 { background-image: repeating-linear-gradient(to bottom, transparent 25px, rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px, transparent 27px, transparent 51px, rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px, transparent 53px, transparent 77px, rgba(0, 0, 0, 0.04) 78p
CSS Filters Generatorは任意の画像にCSSとSVGによるフィルターをプレビューを見ながら作成できるWebアプリです。 画像はサンプルが用意されていますが、アップロードしたり画像のURLを指定するなど任意の画像にフィルターをかける事も出来ます。 フィルターはCSSによるベーシックなものに加えて、SVGをつかったフィルターをかける事も可能です。作成したフィルターのコードはCodepenで動作テストも出来るようになっています。 利用するにあたってユーザー登録等は一切不要で利用する事が出来ます。 CSS Filters Generator
JavaScript でアニメーション Web Animation API Web Animation API を使うと JavaScript で DOM 要素のアニメーションを実装することができます。 現時点（2022年3月）ではほぼ主要なモダンブラウザで使用できるようになっています。 can i use Web Animation API 以下は Web Animation API の基本的な使い方の解説とサンプルです。 animate() メソッドや Animation()、KeyFrameEffect、getComputedTiming() などの基本的な使い方やアニメーションの制御、アニメーションイベント、プロミス、getAnimations() を使った CSS アニメーションの取得方法、Mortion Path や SVG アニメーションなどについて。 Web Animati
Transform SVGs into React componentsA complete tool box to take advantage of using SVGs in your React applications.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Riveってなに？ Riveはリアルタイムでインタラクティブなアニメーションを作成できるツール ReactやFlutterといったフレームワーク向けライブラリを提供 作成したアニメーションを簡単にアプリへ統合できる！ Riveが使われているプロダクト ◆ Duolingo キャラクターの動きやリップシンク（音声に連動した口の動き）をリアルタイムで制御し、学習体験を豊かにしています！ ◆ Notion AIアシスタントの細かな表情や動きをリアルタイムで制御し、対話をより親しみやすく、楽しい体験にしています！ Rive 3つの魅力！ Riveが多くのプロダクトで活用されている理由は、その使いやすさと可能性の広がりにあります。 1. 🤝 デザイナーとエンジニアの連携がスムーズ 従来、デザイナーが作ったアニメーションをエンジニアが再現するには手間がかかりましたが、 Riveではコードでアニメーシ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
