「SVG」の記事 - Crieit

無料ベクトルアニメソフト9VAeきゅうべえが９９ページになった！

2022-07-18T17:31:16+09:00

9VAeきゅうべえが、９９ページ作れるようになりました。このアニメは３２ページです。
Win / Mac / Linux / iOS / iPad / Android / Chromebook / Amazon Fire / Raspberry Pi でSVG/GIF/MP4動画が作れます。
ダウンロードはこちら

イラストACの ai イラストから動画をつくる

2021-03-31T13:16:09+09:00

イラストACの ai イラストから動画をつくる解説記事をかきました。その過程でSVG入力のバグを発見。9VAeを、0.7.9 にバージョンアップしました。解説動画は、9VAe+iMovie で作成してます。https://dnjiro.hatenablog.com/entry/2021/03/30/142405

Cloud FunctionとSVGでOGP画像生成を試行錯誤したまとめ

2020-02-19T19:53:57+09:00

Nuxt+Firebaseで開発してるサービスのOGP画像を改善しようと、
いろいろ試してみたときの備忘録。

OGP画像の生成はクライアント側とサーバ側かがあるが、
Firestoreの変更に合わせて生成したいので、
Cloud Function上で利用できる方法を考えてた。

結果的に、

sharpで画像を合成してベースをつくり
ImageMagickで文字を追記していく

という構成になった。その試行錯誤の備忘録です。

やりたかったこと

背景画像+本の画像+文字みたいなOGP画像にしたい。

あと、座標の指定はめんどくさいので、楽な方法を探してみた。
SVGだとCSSも使えて、ブラウザ上で書くにできるので良さそう。
(と思ったけど、結果、だめだった...)

ためした方法とまとめ

試したのは以下の4パターン。
SVG+sharpで試した感じ。
node-canvasはおまけな感じ程度。

sharp+SVG(style+foreginObject)
- SVGですべて構成する方法。
- フォントとか位置、サイズはstyleで設定
- 外部URLの画像が取得できずにNG
sharp+SVG+画像は別で合成
- 1.の画像部分を別で合成するパターン
- カスタムフォントが設定できずNG
sharp+SVG+ImageMagick
- 画像の合成部分のみsharpをつかい
- 枠線をSVG、文字はImageMagickで書き出し
- これを採用
node-canvas+SVG
- node-canvasもSVGを入力にできるようなので試した
- 1.や2.と同様の理由でNG

内部で利用しているSVGライブラリ自体で未対応っぽいので、
SVGのstyleや外部URLの画像、カスタムフォントなどは、
ブラウザ上以外の画像生成ではまだ未対応っぽい。

ほかにも、CloudFunction上でpuppeteerを使えるようだけど、
メモリをすごい使うっぽい記事を見てしまい、まだためしてない。。

以下試したコード。

SVG(style+foreginObject)

sharpが、foreignObject+sytleに未対応...のためNG
imageに外部URLを使っているとダメっぽい...

import sharp from "sharp";

await sharp("./input.svg")
  .png()
  .toFile("./output.png");

SVG+外部URLの画像

SVGには文字とかだけにして、画像はファイル読み込みで対応
カスタムフォントが使えない...のNG
GAEかlamdaだと、fontconfigに関する環境変数を設定できるが、Cloud Functionでは無理そう
fonts.confを設定してもダメだった...

import axios from "axios";
import sharp from "sharp";

// 埋め込む画像のURL
const bookURL = "https://.../thumbnail.png";
const bookBuffer = await axios.get(bookURL, { responseType: "arraybuffer" });

// URLから取得した画像を加工(リサイズ)
const bookImage = await sharp(bookBuffer.data)
  .resize(520, 454, { position: "top" })
  .toBuffer();

// sharpで結合
await sharp("./background.png") // 背景画像を読み込み
  .composite([
    { input: bookImage, gravity: "south" }, 本の画像を書き出し
    { input: "./input.svg" } // SVGの書き出し
  ])
  .png()
  .toFile(tempFile);

SVG+ImageMagick

画像の加工や合成はsharpを使い、文字の書き出しだけImageMagickを使う
画像の加工・合成部分は、上の「SVG+外部URLの画像」と同じ感じ
ImageMagickで文字を書くのは以下の記事を参照
- Cloud Functions + ImageMagickでOPG画像の動的生成してCloud Storageにアップロードする - くらげになりたい。

node-canvas+SVG

同じくダメ。imageタグの外部URLがNG+foreignObject未対応...
Automattic/node-canvas: Node canvas is a Cairo backed Canvas implementation for NodeJS.

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイト様

SVGでOGP用のPNG画像を生成してみる(折り返し文字、画像埋め込み、PNG化)

2020-01-24T15:25:45+09:00

SVGでOGP画像を作りたいなと思い、いろいろ調べたときの備忘録。

SVGはまるのも多いけど、いろいろできるので、
SVGからOGP画像をつくるのいいかもしれない。

とりあえず、SVGを書いてみる

ちょろっとなるなら、HTMLでベタ書きしてみるのもいい。
動作確認とか楽ちん。

こんな感じ。

で四角を書いて、で丸を書いてる。

上から順に描画されるので、下にある方が前面にくる感じ。
なので、四角の上に丸が描画されてる。

の座標(x,y)は左上の場所なので、
横幅と縦幅分の半分だけ、全体の中心からずらしてる。

$ npm i sharp

変換するコードはこんな感じ。

// generate.js
const sharp = require("sharp");

async function main() {
  await sharp("sample.svg")
    .png()
    .toFile("output.png");
}

main().then();

そして、実行。

$ node generate.js

すると、output.pngというPNGファイルを作成してくれる。

ただ、svgのstyleは反映してくれないので注意。

// generate.js
const sharp = require("sharp");

async function main() {
  await sharp("sample.svg")
    .png()
    .toFile("output.png");
}

main().then();

背景色をつける場合は、sharp側で設定すればOK

// generate.js
const sharp = require("sharp");

async function main() {
  await sharp("sample.svg")
    .flatten({ background: "lightgray" }) // 背景色
    .png()
    .toFile("output.png");
}

main().then();

2. ブラウザ上のSVGを画像化する

ユーザに情報を入力してもらった内容をSVGで表示して、
OGP画像にするという感じが多いので、こっちがメイン。

保存先のFirebase StorageがData URL形式に対応しているので、
PNGのData URLが取得できればOK。

大まかな流れは、こんな感じ。

Canvasを用意する
SVGを読み込むを用意する
を文字列に変換
作成したにDataURL形式でSVGをセットして、読み込み開始
読み込みが完了したら、Canvasに書き出して
CanvasからDataURLを取得する

// svg2DataURL.ts

/**
 * svgをpngに変換
 * @param svgElement

あとは、好きなタイミングで呼び出せばOK。

Nuxt.jsでの例はこんな感じ。

これでSVGがCloud Storage for FirebaseにPNG画像で保存できる(´ω｀)

ブラウザ上 = 全体のCSSが適用
保存画像 = SVG配下のCSSのみ適用

なので、SVGだけで完結しないといけない...

フォントとかも指定しないと、見た目が変わってしまう。。

3. 背景画像など外部リンクがあるとうまく保存できない...

Canvasの仕様っぽく、外部リンクでCORSで引っかかると画像が表示されないよう...

SVGで完結するように、読み込んだ画像をDataURL形式で指定するようにしたらうまくいった(´ω｀)

「SVGで完結」が大事らしい。。

styleでfont-sizeとかも設定できるのでいろいろできそう(´ω｀)

こんな感じ

ただ、foreignObjectはサイズを自動計算してくれるわけではないので、
widthとheightを設定しないといけない。

画像を表示する(image)

SVGで画像を使うときは、を使う。
とは違う。

こんな感じ。

ハマったポイントにも書いたとおり、このままCanvasに書き出すと、
保存時に画像が表示されないので、動的にDataURLを取得してセットするといい感じ。

URLからDataURLに変換するのは、こんな感じ。

// svg2DataURL.ts

/**
 * URLをDataURLに変換
 * @param 変換したい画像のURL
 */
export default function url2DataURL(
  url: string
): Promise {
  return new Promise((resolve, reject) => {

    // 1. Canvasを用意する
    const canvas = document.createElement("canvas");
    canvas.width = 1200;
    canvas.height = 630;
    const ctx = canvas.getContext("2d");
    if (!ctx) {
      reject(Error("Create Canvas Error..."));
      return;
    }

    // 2. SVGを読み込むを用意する
    const image = new Image();
    image.decoding = "async";
    image.onload = () => {
      // 4. 読み込みが完了したら、Canvasに書き出して、
      ctx.drawImage(image, 0, 0, 1200, 630);
      // 5. CanvasからDataURLを取得する
      resolve(canvas.toDataURL());
    };
    image.onerror = e => reject(e);

    // 3. 作成したにURLでセットして、読み込み開始
    image.src = url;
  });
}

画面サイズに合うように表示する(resize対応)

OGP画像としていい感じのサイズで保存したいけど、
表示するときは画面サイズにあった感じにしたい。。

svgにstyleが使えるので、リサイズ時にスケールを計算して、
transform: scale();で縮小する感じにしてみた。

ただ、このまま保存すると縮小されたままになるので、
deepコピーでクローンして、transformをクリアしてから書き出すようにする。

// svg2DataURL.ts

/**
 * svgをpngに変換
 * @param svgElement

以上!!

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイト様

SVGなFont AwesomeをNuxt+Bulmaで使ってみた

2019-12-03T19:52:41+09:00

開発しているWebサービスでFont Awesomeのお世話になってる。
ただ、Web Font版を使っていたので、読み込みが遅い。。

SVG版だとアイコンごとにimportできるようなので、
性能改善の一環でやってみたときの備忘録。

インストール

まずはnpmでパッケージをインストール。
使うものに応じて、追加が必要らしい。

// 必須
$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save@fortawesome/free-solid-svg-icons
$ npm i --save@fortawesome/vue-fontawesome

// オプション(fabとかfarとか使うなら)
$ npm i --save @fortawesome/free-brands-svg-icons
$ npm i --save @fortawesome/free-regular-svg-icons

pluginsの準備

Nuxtでvue-fontawesomeが使えるように、pluginを用意する。
ここで使うアイコンを個別に設定

// plugins/fontawesome.ts

import Vue from "vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

import { config, library } from "@fortawesome/fontawesome-svg-core";
import { faTwitter } from "@fortawesome/free-brands-svg-icons";
import { faPlus } from "@fortawesome/free-solid-svg-icons";

// CSSはnuxt.config.tsで設定するので、vue-fontawesomeでは追加しないようにする
config.autoAddCss = false;

// 必要なアイコンをlibraryに追加
[
  faPlus,
  faTwitter,
].forEach(v => library.add(v));

// グローバルコンポーネントとして登録
Vue.component("fa", FontAwesomeIcon);

nuxt.config.tsの設定

cssと用意したプラグインを追加する

// nuxt.config.ts
import NuxtConfiguration from "@nuxt/config";

const config: NuxtConfiguration = {
  mode: "spa",

  css: [
    // CSSを追加
    "@fortawesome/fontawesome-svg-core/styles.css",
  ],

  plugins: [
    // プラグインを追加
    { src: "~/plugins/fontawesome", ssr: false },
  ],
};

設定はこれでOK

なので、Font Awesomeに合わせる形で、すこし変更する。

.icon svg {
  width: 1em;
  height: 1em;
}

また、それでもズレが起こる場合は、個別にvertical-alignを設定して調整。

.icon {
  vertical-align: -0.1em;
}

もう少し良いやり方もありそうだけど、とりあえずこれで対処。。
なお、Buefyだとうまくやってくれないみたいなので、とかは使えない。。

以上!!

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

「SVG」の記事 - Crieit

無料ベクトルアニメソフト9VAeきゅうべえが９９ページになった！

イラストACの ai イラストから動画をつくる

Cloud FunctionとSVGでOGP画像生成を試行錯誤したまとめ

やりたかったこと

ためした方法とまとめ

SVG(style+foreginObject)

SVG+外部URLの画像

SVG+ImageMagick

node-canvas+SVG

こんなのつくってます!!

参考にしたサイト様

SVGでOGP用のPNG画像を生成してみる(折り返し文字、画像埋め込み、PNG化)

とりあえず、SVGを書いてみる

画像化する

1. ローカルで画像化する

sharpでsvgをpngに変換してみる

2. ブラウザ上のSVGを画像化する

ハマったポイント

1. 画像化するときにhtml2canvasを使うといいかんじにならない

2. ブラウザ上と保存した画像が違う

3. 背景画像など外部リンクがあるとうまく保存できない...

小ネタ集

svg内でstyleが使える

折り返し文字を表示してみる(foreignObject)

画像を表示する(image)

画面サイズに合うように表示する(resize対応)

こんなのつくってます!!

参考にしたサイト様

SVGなFont AwesomeをNuxt+Bulmaで使ってみた

インストール

pluginsの準備

nuxt.config.tsの設定

使い方

ハマった...

Bulmaと一緒に使うと、うまくいかない？

こんなのつくってます!!

参考にしたサイト