macSVG
Introducing macSVG July 16, 2022 – macSVG v1.2 is released, adding native support for Macs with Apple Silicon M1/M2 processors. See the Release Notes for details. macSVG is a MIT-licensed open-source macOS application for designing and editing Scalable Vector Graphics (SVG) content for HTML5 web pages, mobile apps, animation design, and general graphics usage. SVG is an open-source format for comp
Aerotwist - Slicing SVG 9 Ways
I recently made a 3D Card Flip element as part of my Supercharged YouTube video series, and I ran into some challenges with the shadows. I decided I should explain how I approached the solution. Last updated: 30 Aug 2016 Est. Read Time: 10 min Share this: Twitter Tagged: #svg, #responsive, #performance For the show I hard-coded the size of the shadows beneath the card being flipped, but in a Respo
SVGでプログラマブルな書体を作る話｜dwango creators' blog（ドワンゴクリエイターズブログ）
こんにちは、2016年度にデザイナー職で新卒入社しました@Ln_northです。新卒研修も終わり、現在はOJTのもとで生放送チームにジョインしています。 さて、Googleのロゴが変わっていくらか経ちますが、このロゴはSVGを使うと少ないデータ量で表現できるというニュースが話題になりました。 この記事を見た際に、厳密には視覚調整が入るはずなので、正確に幾何的図形とは一致しないだろうという感想も抱きました。しかし、SVGで文字を生成するということには非常に興味を持ちました。今までにも、文字のアウトラインを使ったアニメーションや表現はありましたが、文字自体を生成するというものは見たことがなく、そしてSVGはJavaScriptで操作することができるため、書体の印象が動的なフォントを作ることができると考えたからです。 どういうことかというと、例えば であるとか、 といったことができるかもしれない
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
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
Optimising SVGs for Web Use — Part 1
In this article I’ll cover the basic concepts of svg path optimisation. Part 2 and part 2½ is where I’m showing you how I’m doing it. I’ve optimised some of the most commonly used social icons, badges and flags here: github.com/larsenwork/web.svg.min IE8 use where I live is 0.35% 🤗Why use svg in the first place? Because IE8 is gone and svgs are awesome and should replace icon fonts — explained br
SMIL Is Dead! Long Live SMIL! A Guide To Alternatives To SMIL Features | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! SMIL, SVG’s native animation specification, has been highly regarded because it offers so many bells and whistles for performant SVG animation rendering. Unfortunately, support for SMIL is waning in WebKit, and has never (nor will likely ever) exist for Microsoft’s IE or Edge browsers. Have
Casino neu online with SVG Path Generator Polynomic
Neu Casino SVG Path Generator PolynomicHi! I’m a creative developer with a strong interest in modern JavaScript stack and Functional Programming. I’m a perfectionist constantly looking for technical challenges and I always try to produce a clean, well-documented, and tested code. If you are as passionate as I am about web development, let’s build something cool together! Check some of the tools th
LEXUS888: Link Situs Judi Slot Gacor Online Terbaru & Terpercaya - LEXUS888
Para pemain di situs permainan slot gacor tidak hanya perlu mengetahui jenis permainan yang menguntungkannya saja, namun juga perlu mengetahui penyedia permainan tersebut jika ingin bermain slot gacor. Ada banyak penyedia permainan slot online yang tersedia untuk Anda saat masuk ke situs LEXUS888. Lalu penyedia game apa yang terbaik untuk digunakan para gamer? Berikut ulasannya: Slot Online ACE333
SVGの見た目は「属性」で書く――HTMLとの違い
SVGはCSSよりも後に登場した仕様なので（SVG 1.0が2001年リリース、CSS 2が1998年リリース）、いくつかの属性は普段CSSでなじみのあるプロパティとまったく同じ名前になっています。また、それ以外の属性名についても、ハイフン「-」区切りとなっており、CSSプロパティ名の作法に則っています。SVGの属性名は、当時としてはモダンなルールで決められたわけですね。 それぞれの属性がどのような表示になるのか、簡単に見ていきましょう。 塗り色を指定する「fill属性」 fill属性は、塗り色を指定する属性です。値にはCSSでも使っている「色」を指定します。fill-opacity属性を併用すれば、塗り色の透明度も指定できます。 <body> <svg width="320" height="200" viewBox="0 0 320 200"> <circle cx="40" cy="
SVGで画面全体に斜め線や曲線を引く
SVGで画面全体に斜め線や曲線を引く 一昔前だと単純な斜め線とか円をバックに置きたいときは画像で作ってましたが、最近ではわりとSVGを使うことが多いようです。 SVGの良いところはベクターなので画面全体に配置しても荒くなったりしないとか、コードで作成できるので後々アニメーションなどもできたりします。 ここでは単純な図形ですが画面全体に表示する方法をご紹介します。 投稿日2015年09月29日 更新日2015年10月14日 準備 まずはSVGをHTML内に記述する方法です。 HTML <div id="wrap"> <div class="description"> ここにコンテンツが入ります。 </div> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="
ほんのちょっと高度なSVGスプライトの使い方
当ブログではちょくちょくSVGについて書いていました。 （といっても、ほぼ月一更新なので、前に書いたのは1年くらい前かもしれませんが……） みなさま使ってらっしゃいますでしょうか？ 今回は「ほんのちょっと高度なSVGスプライトの使い方」と銘打って、『グラフィックのモジュール化』を行うための基礎的な考え方と方法をお伝えします。 ロゴにこそ、使ってみようSVGスプライト このブログでもロゴ（というレベルのクオリティではありませんが…）をSVGで表示させています。 また、お気付きの方もいらっしゃるかと思いますが、このトピックス「Web Resource」とその他のトピックスでは使用しているロゴの形状が異なっています。 しかし、これらはすべて「一つのSVGスプライトファイル」の中の「同一データ」です。 アイコン等をひとまとめにして、httpリクエストをみだりに増やさず、かつ非常に軽量（これだけのグ
【追記あり】SVGコードゴルフと,GIZMODO「Google新ロゴ」記事へ反論 - 聴く耳を持たない(片方しか)
＜ここから追記：2015-09-10＞当初投稿した内容が、前提から誤った思い込みで書かれておりました、詳しくは後半の追記を参照してください。 ＜／追記ここまで＞ はじめに先日こうしたツイートが話題になりました。 https://twitter.com/thespite/status/639107572679712772 これは先頃リニューアルが発表されたGoogle社のロゴ Evolving the Google Identity - Library - Google Design がシンプルな構成に見えることから、それを荒く手軽に作るなら（quick and dirty version）290バイトで作れるよ！という内容です。 リンク先の中身を見てみるとこのような490バイトのSVGファイルになっており <svg xmlns="http://www.w3.org/2000/svg" wi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ssvvgg.net
Tumblr
10 golden rules for responsive SVGs
GitHub - emilbjorklund/svg-weirdness: A repository of bugs and plain weird behavior in SVG
The Wonderful World of SVG
WordPress › Error
SVG Circle/Ellipse to Path Converter - ComplexDan