A CCO project maintained by the Simple Icons contributors. Use GitHub for requests, corrections and contributions. Kindly supported by your donations at Open Collective.
svgに関するJxckのブックマーク (25)
-
Jxck 2020/06/30
-
Lazy async SVG rasterisation
Phwoar I love a good sciency-sounding title. SVG can be slow When transforming an SVG image, browsers try to render on every frame to keep the image as sharp as possible. Unfortunately SVG rendering can be slow, especially for non-trivial images. Here's a demo, press "Scale SVG". Devtools timeline for SVG animation Sure, this is a pretty complex SVG, but we're 10x over our frame budget on some fra
-
Me and SVG by Amelia Bellamy-Royds on CodePen
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View. For the past three-and-a-half years of my life, I have devoted a large portion of my time and creativity to the creature known as SVG. Whether that
-
-
目指すのはぶっちぎりの速さ! なぜ HTML5 版CacooはSVGを採用するのか | 株式会社ヌーラボ(Nulab inc.)
こんにちは！ Cacoo チームの中原です。現在CacooチームはFlashで作られている図の編集画面(以下エディタと表現します)を* HTML5 で置き換える開発を進めています。このブログでは、 HTML5 版 Cacoo で図形の描画に使用される、SVGを選択した理由と経緯について説明したいと思います。 （*置き換える理由については「Good-Bye Flash ~ CacooはHTML5で生まれ変わります」をご覧ください） どの技術を使って図形を描く?重視したのは「パフォーマンス」 図形の描画にどんな技術を使うか。いくつか候補を上げました。 2D Canvas 3D Canvas (WebGL) SVG (これ以外に、Unityという意見もありましたが今回はWeb標準技術を使うことを前提にしました。) さて、どれを使おう。私たちがどの技術を選択するのか、基準を決める必要があります。そ
-
-
高解像度の端末への対応について考えてみた | ウェブに関する雑談 | ブログ | フォルトゥナ
CSS Niteの「Shift10:Webデザイン行く年来る年」のデザイントレンドセッションがたった今終わりました。 「坂本の目」の部分で「画像解像度再考」ということでお話させていただきましたが、若干時間が足りないはずなので、ブログで補足しておこうと思います。 海外サイトは解像度が高くてもきちんと見える 今回、デザイントレンドで多くのサイトを見ていて気づいたのは、多くの海外サイトがフルHD(1920x1080ピクセル)以上の解像度の端末で見てもきちんと見えるように作ってあり、それに対して国内のサイトの多くは解像度の高い端末で見ると、文字が小さく読めないというものでした(比べるのがそもそも無理があるのは承知しております)。 実寸で見ていただいた方がわかりやすすいのですが、この画像でも幅1920pxで見た場合と幅1366pxで見た場合では、スケール感も全然違って、高解像度では文字も相当小さく感
-
The SVG `path` Syntax: An Illustrated Guide | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. The element in SVG is the ultimate drawing element. It can draw anything! I’ve heard that under the hood all the other drawing elements ultimately use path anyway. The path element takes a single attribute to describe what it draws: the d attribute. The value it has is a min
-
SVG Authoring Guide
SVG is a generalized graphics markup language, which can be used for any purpose from icons to complex images to data visualizations to animated pictures to interactive applications. SVG can be generated by script libraries, by GUI drawing applications, or by hand-coding. Because of this flexibility, SVG does not dictate a structured content model, though it does provide primitives for structure,
-
SVG & media queries - JakeArchibald.com
One of the great things about SVG is you can use media queries to add responsiveness to images: <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <style> circle { fill: green; } @media (min-width: 100px) { circle { fill: blue; } } </style> <circle cx="50" cy="50" r="50"/> </svg> <img src="circle.svg" width="50" height="50" /> <img src="circle.svg" width="100" height="100" /> <ifram
-
-
外部SVGファイルを非同期で読み込み、インラインのSVGスプライトとして利用する | UNORTHODOX WORKBOOK | Blog
SVGスプライトを外部ファイルとして読み込みたくて、色々と調べたり試してみたりしていたのですが、外部SVGをAjaxで非同期読み込みするという方法が一番しっくりきたので、その方法を紹介します。 SVGスプライトといっても、CSSで背景画像として表示させるものではなく、HTMLにインラインで表示させるためのSVGスプライトになります。 何もしなくてもuseタグのxlink属性で外部SVGファイルを参照できることは知っていたのですが、IE9+でサポートされてなく、またEdgeでも怪しいとのことだったので、その方法は利用してきませんでした。ポリフィルを使ったフォールバックもあるようですが、そのためだけのフォールバックも何だか気持ちが悪かったので。。 今までやっていた方法 これまではbodyの開始タグすぐ下にsvgタグを置き、その中へ画像ごとにsymbolタグで囲み直したsvgをずらーっと並べus
-
Electronでwebfont変換ツールを作ってみた話 - Qiita
Electronさわってみました アイコンフォントを作り直す案件があり、位置調整やサイズ感の確認のたびにコマンド叩くのも、（リモートの）デザイナーさんとやりとりするのも大変だなということで、デザイナーさん向けの検証用のツールを作りました。 ゴール: GUIでSVGからwebfontに変換できるようにする github: svg2webfont に置いてます。 ツールとしては、ブラウザ上で使えるIcoMoon や fontello に近いものです。 もちろんこれで不便なければこちらを使えば良いのですが、 unicodeとアイコン名が対応しているjsonファイルが欲しい web上のサービスに依存するのが怖い（手元でやりたい） 一度作ってしまえばどのプロジェクトでも使いまわせそう Electronで何か作ってみたかった（重要） ということで、お試しでつくってみました。 Electronを使う利点
-
Practical SVG
A note from the editors: We’re pleased to share an excerpt from Chapter 6 of Chris Coyiers’s new book, Practical SVG, available now from A Book Apart. You’ll probably want to exert some sizing control over any graphic you put on a website. Hey! You! Logo! You should be this size: <img src="logo.png" class="logo" /> .logo { width: 220px; height: 80px; } And so shall it be. But if the element you ar
-
SVGでプログラマブルな書体を作る話｜dwango creators' blog（ドワンゴクリエイターズブログ）
こんにちは、2016年度にデザイナー職で新卒入社しました@Ln_northです。新卒研修も終わり、現在はOJTのもとで生放送チームにジョインしています。 さて、Googleのロゴが変わっていくらか経ちますが、このロゴはSVGを使うと少ないデータ量で表現できるというニュースが話題になりました。 この記事を見た際に、厳密には視覚調整が入るはずなので、正確に幾何的図形とは一致しないだろうという感想も抱きました。しかし、SVGで文字を生成するということには非常に興味を持ちました。今までにも、文字のアウトラインを使ったアニメーションや表現はありましたが、文字自体を生成するというものは見たことがなく、そしてSVGはJavaScriptで操作することができるため、書体の印象が動的なフォントを作ることができると考えたからです。 どういうことかというと、例えば であるとか、 といったことができるかもしれない
-
A pocket-sized guide to using SVG icon sprites in web apps
There are many ways to handle icons — over the last few years we went through PNG sprite maps, icon fonts, and more recently, SVG embeds. Taking it one step further, let me show you a simple, yet powerful, vector-based technique. Start with exporting each of the icons using the same artboard size (e.g: 128x128):
-
-
Delivering Octicons with SVG
AI & MLLearn about artificial intelligence and machine learning across the GitHub ecosystem and the wider industry. Generative AILearn how to build with generative AI. GitHub CopilotChange how you work with GitHub Copilot. LLMsEverything developers need to know about LLMs. Machine learningMachine learning tips, tricks, and best practices. How AI code generation worksExplore the capabilities and be
-
SVGで図形やアニメを描画してみよう
知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう グループ化・リンク・変形 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。前回はSVGの基礎編として、SVGドキュメントの基本的な書式と基本図形の描画方法、各種スタイル指定の方法などを解説しました。 今回はその続きとして、変形やアニメーション、フィルター、JavaScriptによる制御といった機能を取り上げていきます。例によって多数のサンプルとともに解説していきますが、Webブラウザによっては一部が動作しません。確実にサンプルを見たい方は、FirefoxまたはOperaの最新版をご使用ください。 ■ 図形のグループ化 まずは前回取り上げられなかった重要な基本機能として、「図形のグループ化」を解説します。SVGのようなベクトルグ
-
How to work with SVG icons
There are many ways to use SVG icons in HTML and CSS, and I haven’t tried them all. This is how we do it in our small front-end team at Kaliop. It works well for our needs, which include: Content and communication websites, often based on big CMSes, rather than full-JS web apps. Icons which are often simple, single-color icons (each potentially used in several different colors depending on context
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2024 Hatena. All Rights Reserved.
設定を変更しました