Useful SVGO[ptimization] Tools Published on 26 Jan, 2015 | Takes approximately 5 min to read One of the steps you need to do when working with SVG is optimizing the SVG code after exporting it from the editor and before embedding in on your web page. For that, several standalone optimization tools exits. The two tools I usually mention in my articles and talks are Peter Collingridge's online ed
![Useful SVGO[ptimization] Tools](https://cdn-ak-scissors.b.st-hatena.com/image/square/42a27b2e109dff8bc3f8c4893279f77991badee0/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fsarasoueidan.com%2Fog.png)
InkscapeにはCLIがあったらしい。これを利用するとSVGから様々なファイル形式、特にPNGへの変換を自動化しやすくなる。最初PhantomJSとcanvas使ってやろうかとか錯乱してた。後出しだけどSVG Advent Calendar 2014の12日目の記事ということにしておこう。 例えばin.svgを幅256ピクセルのPNGファイルとしてout.pngに変換したいとする。Inkscapeの実行ファイルのディレクトリーへパスが通っているとすると、以下のようなオプションで実行すれば変換される。 $ inkscape --without-gui --export-width=256 --file=in.svg --export-png=out.png --without-guiでGUIの起動を無効にし、--export-widthで幅を(高さはアスペクト比を維持してくれる)、--f
Inkscapeのv0.91pre2が出たのでインストールしたところ、ローカルのSVGファイルがChromeで表示できなくなった。どうもInkscapeのインストーラー(多分安定版のインストーラーでは起こらない)が関連付けを変える時に間違ったContent-Typeを設定してしまうことが原因のようだ。 修復はレジストリ・エディターで行うのが一番早そう。 HKEY_CLASSES_ROOT\.svg を開き、Content Typeという名前の文字列の値をimage/svg+xmlにするか削除する。 Chromeに限らずFirefoxでも同様のことが起こるらしい。またBracketsのような内部でWebKitを利用しているものでも似たような現象としてツールバーのアイコンが表示されなくなることがあるらしい。これらで困っている人も同じ手順で直る。
HOME > 電算 > Inkscape メモ Inkscape メモ Inkscape もバージョンが上がって、このページも一新する必要が出てきた。ということで、漸々に作業を進めむ。（古いページ） 目次 概略 Inkscape 雑感 標準保存形式 Inkscape SVG Inkscape の拡張スクリプト おまけ——長方形や円をシェアにより分割する Inkscape の拡張スクリプト 他のファイル形式の読み書き 単位のこと SVG から見た Inkscape の機能(クローンとコピー、レイヤー、変形、文字コード、テキストの流し込み、背景色、マーカ、パスを塗りつぶす 概略 Inkscape は、Linux, Windows, Mac OS X などのプラットホームで動作するオープンソースかつフリーのドローイング・ツール（ドロー・ソフト）である。SVG という形式にネイティブに対応している
NAME SYNOPSIS DESCRIPTION OPTIONS CONFIGURATION DIAGNOSTICS EXAMPLES ENVIRONMENT VARIABLES OTHER INFO SEE ALSO GUI NOTES KEYBINDINGS BUGS HISTORY AUTHORS COPYRIGHT AND LICENSE NAME Inkscape - an SVG (Scalable Vector Graphics) editing program. SYNOPSIS inkscape [options] [filename_1 filename_2 ...] options: -?, --help --help-all --help-gapplication --help-gtk -V, --version --debug-info --system-dat
名前 Inkscape - SVG （ Scalable Vector Graphics ）編集プログラム。 Inkscape - an SVG (Scalable Vector Graphics) editing program. 書式 inkscape [options] [filename ...] options: -?, --help --usage -V, --version -f, --file=FILENAME -e, --export-png=FILENAME -a, --export-area=x0:y0:x1:y1 -C, --export-area-page -D, --export-area-drawing --export-area-snap -i, --export-id=ID -j, --export-id-only -t, --export-use-hin
今回はベクター画像編集ソフトウエアInkscapeのエクステンション（拡張機能）「Sozi」を使って、Preziのようなダイナミックで動きのあるプレゼンテーション資料を作成する方法を紹介します。 Soziとは Soziは、ベクター画像編集ソフトウエアInkscapeのエクステンション（拡張機能）プログラムです。 Soziを使うと、Inkscapeが利用しているSVG（Scalable Vector Graphics）ファイルに、アニメーションのための付加情報とプレゼンテーションコントロール用のJavaScriptを埋め込みます。 そうして作成したSVGファイルをWebブラウザで開くと埋め込まれたJavaScriptが実行され、Prezi[1]で作成したプレゼンテーション資料のように、ズームイン・ズームアウトのアニメーションをしながらダイナミックに動くプレゼンテーション資料として再生ができ
第1回徳島LibreOffice勉強会での発表資料です。 http://tokushima-libreoffice.doorkeeper.jp/events/11266 ODFを埋め込んでいますので、LibreOfficeで開くと編集できます。
Sozi is a small program that can play animated presentations. Unlike in most presentation applications, a Sozi document is not organized as a slideshow, but rather as a poster where the content of your presentation can be freely laid out. Playing such a presentation consists in a series of translations, zooms and rotations that allow to focus on the elements you want to show. Sozi is based on open
Inkscapeでオブジェクトを移動させたりする時に適当にドラッグアンドドロップとかでやるとtransformプロパティーでtranslate()関数を使った形の移動が行われる。出力されるSVGのサイズの節約などのためにちゃんと(?)移動させたい場合はメニューのオブジェクトにある整列と配置を使ったり、変形ダイアログで相対移動のチェックボックスをオフにして座標指定で移動させる必要がある。 Inkscape's Transform Dialog 既にtransformプロパティーがついてしまっている場合はメニューの編集からXMLエディタで消した後にちゃんとやり直すとか……なのかよくわからない。他になんかちゃんとやり方ありそう。 スクリーンショットみたいにWindowsのInkscapeのUIフォントをまともに(Segoe UIとメイリオの組み合わせに)する方法は思い出せたら書く。
InkscapeはUIフォントが明朝になっていて、他と統一感がなく気持ち悪いので直したいが特にそういった設定は用意されていない。検索して見つかる情報もgtkrcを～とかGTKアプリの問題で～とかそういうのが多く、それらは大体正しいのだけど、pango.aliasesでMingLiUが優先的に使われるように設定されているのを直すのが一番労力が少なそう。Inkscapeは7-Zipで圧縮されて配布されているWindows版のv0.48.2を前提にする。 配布アーカイブにあるetc/pango.aliasesで定義されているsansというエイリアスがUIで使われているようなのでその行だけを変更する。 sans = "segoe ui,meiryo,arial,browallia new,mingliu,simhei,gulimche,ms gothic,kartika,latha,mangal,
Inkscape-aholic！
Photoshopのカラーハーフトーンフィルターを使ったようなドットデザインの作り方を、InkscapeでDesignにアップしました。 →カラーハーフトーン風のドットデザイン｜InkscapeでDesign Gimpでは「新聞印刷」フィルタに相当するものです。 （「フィルタ」－「変形」－「新聞印刷」 ※Gimp ver.2.6） Inkscapeでは、タイルクローンの「トレース」機能を使って、同じような雰囲気のものを作ることができました。 こんな風に、「ぼかし」やグラデーションを設定したオブジェクトを引き、 不透明度を円のクローンでトレースさせます。 つまり、不透明度をインプットして、それに応じたサイズのクローンをアウトプットします。 クローンを作成後、オリジナルの円を拡大／縮小することで、 ドットの詰まり具合を変更することもできます。 詳しくはこちらへどうぞ。 →カラーハーフトーン風の
2012.07.19 応用編に「カラーハーフトーン風のドットデザイン」を追加しました。 2012.06.11 リンク集に「Inkscapeのショートカット集」へのリンクを追加しました。 2012.03.07 応用編に「タイルクローンで唐草模様を描く」を追加しました。 ＞＞もっと見る
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
inkscape tutorials blog
