SVG はテキストベース（XML）なので、LLM の生成と相性が良いのは周知の事実かと思う。ただの自然言語を吐くように、順に XML を吐いていくことでベクター画像が生成できる。 例えば下記は OmniSVG のデモ動画であるが、LLM の出力をインタラクティブに可視化することで徐々に画像が「描かれていく」ことも演出できる。 OmniSVGOmniSVG汎用 LLM ではうまく生成できない SVG汎用 LLM（Claude や GPT 等）で SVG を生成させようとしてうまくいかないケースは多い。 例えば下記は Noto Emoji のexpressionless-face（PNG 版）を Sonnet 4 に渡してその通りに生成してね！とお願いした様子。愛嬌はあるがもうひと頑張り。 渡した画像生成 SVG汎用LLMは幅広い適応性と膨大な事前トレーニング済み知識ベースを備えているため、ド
This tool will convert an SVG shape created with <path d="..."> into a CSS Shape. You will get a responsive code made with the new shape() function of clip-path. A single-element implementation that works with images and supports gradient coloration! Paste your SVG path below. Keep only what is inside the d attribute.
@_yuheiyによる当エンジニアブログで実施したアクセシビリティ改善の方法についての解説は全体的に丁寧に説明しているだけに、下記の記述がちょっと気になったという話です。 これがimg要素であればalt属性を使って代替テキストを設定すべきですが、svg要素ではそれができません。そこで、WAI-ARIAの出番です。次のようにすることで、alt属性と同様に代替テキストが設定できます。 SVGネイティブに代替テキストを設定する方法は（SVGの）title要素だ、ということはおさえておくべきかなと。SVG2仕様書訳（原仕様書）に次のように書かれています。 title 要素は、 その親要素用の短いテキスト代替を表現する。 つまり、aria-labelを使うことなく、次のように書けます。（HTML解体新書のp.339にもあります。） <a href="..."> <svg role="img"><ti
2014年から先端テクノロジーの研究を論文単位で記事にして紹介しているWebメディアのSeamless（シームレス）を運営し、執筆しています。 この1週間の気になる生成AI技術・研究をいくつかピックアップして解説する「生成AIウィークリー」（第91回）では、複数の写真に写る被写体を1枚の写真に統合させる画像生成AI「UNO」や、1枚の写真から音声に応じた話す人物映像を作成するトーキングヘッド生成AI「FantasyTalking」を取り上げます。 また、複雑で高品質なデザインでもSVG画像生成できるAI「OmniSVG」や、3Dモデルを意味のあるパーツに分解するAI「HoloPart」をご紹介します。 そして、生成AIウィークリーの中でも特に興味深いAI技術や研究にスポットライトを当てる「生成AIクローズアップ」では、大規模言語モデル（LLM）が人間の本質をどのように捉えているかを調査した
現時点の AI コーディングの実力を測るために、自分はプロンプトのみ、直接コードを書くのは禁止で Roo Code による VS Code によるエディタ操作のみでコードを書かせた。その感想 (急いで書いたのでいろいろと雑です) tl;dr 良し悪しはともかく、人類は確実にAIによる自動操縦型のプログラミング体験に依存するという確信を持った。 ただ、その基盤である CLINE(系)自体のツールとしての完成度はいまいち。 CLINE以外の、各モデルのコーディング性能も、現時点では物足りない。 CLINE とは何か(知らない人向け) いろいろと機能はあるが、コア機能としてはヘッドフルな vscode runner で、AI にコードを書かせるために必要な情報を受け渡しするインターフェースを持っている。ファイルの読み書きや、コマンドを実行結果をプロンプトにしてAIに渡す。puppeteer によ
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 – デ
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 124 124" fill="none"> <rect width="124" height="124" rx="24" fill="#F97316"/> <path d="M19.375 36.7818V100.625C19.375 102.834 21.1659 104.625 23.375 104.625H87.2181C90.7818 104.625 92.5664 100.316 90.0466 97.7966L26.2034 33.9534C23.6836 31.4336 19.375 33.2182 19.375 36.7818Z" fill="white"/> <circle cx="63.2109" cy="37.53
テキストの横にアイコンを配置すると、アイコンが少し大きすぎてバランスが悪いと感じることはありませんか？ アイコンは通常のMiniサイズだと20x20ですが、それより一回り小さく高密度のUI向けに設計されたMicroサイズの16x16のSVGアイコンを紹介します。 Heroicons Micro Heroicons -GitHub Heroicons Microの特徴 Heroicons Microのダウンロード Heroicons Microのアイコン Heroicons Microの特徴 Microサイズのアイコンは、先日v2.1にアップデートされたHeroiconsに新しく加わったサイズです。 タイトで高密度のUI向けに設計されており、UIデザイン用に約300種類のアイコンが揃っています。MITライセンスで、商用プロジェクトでも無料で利用できます。 Heroicons 既存のアイコンを
Apache Batik¶ Overview License Download Notes Status Demo FAQs Batik Wiki Mailing lists Contributors Bug database Projects using Batik Batik Tools¶ Overview Browser Rasterizer Font converter Pretty printer Using Batik¶ Overview Architecture Javadoc APIs DOM API Parsers Scripting¶ Scripting with ECMAScript Scripting with Java Scripting with Security SVG generator Swing components Transcoder API Ext
WebサイトやスマホアプリのさまざまなUIデザインにぴったりな、シンプルなソリッド・ベタ塗りからおしゃれなカラーまで揃ったSVGアイコンが完全無料で利用できるblendiconsを紹介します。 アイコンはなんと、200,000個以上！ ベーシックなUIをはじめ、ショッピングサイト、タッチジャスチャー、日用品や家具、飲食物、スポーツ、ミュージックなど、多種多様なアイコンが揃っています。 blendicons Blendiconsはデザイナーやデベロッパーが容易に必要なアイコンを手に入れられるように、200,000個以上の高品質なアイコンを作成し、ダウンロードできるようにしたサイトです。 アイコンの利用にあたっては個人でも商用でも無料で、Webサイトやスマホアプリをはじめ、プレゼンや印刷物などあらゆる用途に利用できます。アイコンをカスタマイズして利用することもOKです。ただし、アイコン素材をそ
SVGTutorialsIntroducing SVG from scratchIntroductionGetting startedPositionsBasic shapesPathsFills and StrokesGradients in SVGPatternsTextsBasic transformationsClipping and maskingOther content in SVGFilter effectsSVG fontsSVG image elementTools for SVGSVG and CSSReferenceElements<a><animate><animateMotion><animateTransform><circle><clipPath><cursor> Deprecated <defs><desc><ellipse><feBlend><feCol
Combining GSAP’s Scroll Trigger and Flip with a SVG Filter, based on a demo by Fabio Ottaviani. The other day I stumbled across this demo by Fabio Ottaviani and I was wondering how this animation could work on scroll. The idea of the demo is to animate a mask shape that has a SVG turbulence filter applied to it. Magically, this results in an apparent animation of the the whole distortion around th
Growing number of generatorsGet started with one of our flexible SVG generators that will help you create unique data-driven shapes without hassle. Choose between stacked or layered waves, steps, peaks, blobs, symbols, grids, gradients, and much more. Easy to integrate into your workflowWhether you are creating a poster or a website, integrating Haikei into your workflow is easy! Export your backg
ChatGPTはテキストを生成するGenerative AIであるが、SVGのようなテキストフォーマットの画像であれば描くことができるのではないか？と思い、試してみることにした。モデルにはGPT-4を使用し、GPTにひよこ🐤を描かせることをゴールとして始める。 (私) svgのフォーマットを知っていますか？はいかいいえで答えてください。 (ChatGPT) はい (私)では、svgのコードをあなたに書いてもらいます。まずは正方形のsvgコードを書いてみてください。 (ChatGPT) 以下のコードは、SVGフォーマットで正方形を描画するものです。 このコードでは、正方形の大きさを100x100ピクセルに設定し、色を青（blue）に設定しています。必要に応じて、大きさや色を変更してください。 ChatGPTが描いた正方形 （これは簡単だろう）<svg width="100" height=
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
