Home About
SVG のパスコマンドをつかってアイコンデータをつくる

こんなホウキの絵のアイコンをつくりたい。

A broom

手動で点を算出した上であとから調整(拡大縮小や回転)するので、 Kotlin Script を使う。

» Read More
ラスター画像をトレースして SVG にする試み

example 1

Vector Graphics を扱うアプリを書いているのだが、 普通の raster 画像のインポートをサポートしたい。

関連しそうな技術を調べてみると テキストから画像を生成するAIで、 ベクターデータを生成するものがあった。

これはすごいが、今のところはラスター画像をSVGに変換できればそれでよい。 さらに調べてみたところ potrace というものが存在していた。

このように白黒の raster 画像をベクターデータに変換するツールです。

» Read More
Quick, Draw! のデータをパースして SVG に変換

Quick, Draw! というプロジェクトがあります。 ここで描かれた落書きデータの入手方法がこちらで説明されているので、kotlin でパースして SVG に変換してみました。

ゆくゆく ss one のプロジェクトで、 これを何かに活用できないかとは思っている。

» Read More
六角形のフラクタル図形 kotlin 版

随分前にGroovy で SVG を出力して、六角形のフラクタル図形を書いたというエントリーを書いたのですが、 それを Kotlin に移植しました。 あとで Haskell にも移植するつもりなので、そのとき移植しやすいように Haskell に寄せて記述したつもりです。

Groovyのコードでは、描画色をカラフルにしていましたが、これは白黒です。

fractal-hexagons

» Read More
歯車っぽい設定アイコン画像をつくる / 円周上の点を計算して図形を描画

歯車風の見た目の 設定アイコン をSVGで描画しようとおもった。 歯車の図形は円周上の点を計算してそれをつなぐとうまく描画できそうなので、 円周上の点の計算とそれらを組み合わせて図形をSVG描画する方法についてコードをまとめておきます。

settings_icon

» Read More
SVGコマンドを android.graphics.Path に変換

以前に書いた Kotlin による簡易SVG parser の実装実験 を使って自前のAndroidアプリのアイコン描画などを行っていたのだが、 そんなの標準に提供されているライブラリで対処できるだろう、と思って調べたところ対処できたのでメモしておきます。

» Read More
たくさんある SVG ファイルを一括で PNG に置き換える makefile を書いた件

make の wildcard 指定がわかりづらい。

» Read More
星を SVG で描画したい

star

Small Sketch という Android アプリのアイコンで星型を使いたくなったので、星をSVGで記述する必要が生じた. 星は円周上の5つの点を直線で結ぶとできる図形. 円周上の点の計算といえば三角関数、それから直線の交点の計算、それらの点を結ぶと星のパスが描画できる. これらの計算処理をまとめます.

» Read More
Apache Batik SVG Toolkit による SVG から PNG への変換

単に SVG を PNG に変換したいだけならば、 たとえば inkscape コマンドがあれば簡単にできる。 ただ、今回は諸事情により 画像変換だけでなく、さまざまな加工処理を連続して行いたかったので、 Groovy でそれらをまとめて処理することにした。

» Read More
Kotlin による簡易SVG parser の実装実験

Androidアプリに使用するちょっとしたアイコンをコードで直接生成することがある。

» Read More
戻るボタンのアイコンを描画する Drawable の自作

以前は、R.drawable.ic_menu_back といった戻るボタンのリソースが標準であったような気がしたが、見つからない。標準の android のアイコン一覧を探したところ、こちら にそれがあり、リソースは material-design-icons から入手できるようだ。

» Read More
Groovy で SVG を出力して、六角形のフラクタル図形を書いた

六角形のフラクタル図形 kotlin 版 を書きました。2023-02-04 更新

コードが少し長いのですが、ここにメモしておきます。

fractal-hexagons

» Read More