SVGのviewBoxでは凝りたくない

引き続きSVGについてのメモ。
svgタグのviewBox属性では、(0,0)から、svgの幅・高さをとる、ということ以外したくない。以下のごとくにしたい。

<svg width="500px" height="500px" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">

だって、svgとviewBoxの矩形のアスペクト比が違っていると、余白が入ったり歪んだりするし。それらを操作するためにpreserveAspectRatio属性を指定しないといけないし。次の記事にある。

qiita.com qiita.com

あと、例えば「見た目でわかる最小の大きさのドット」を打つつもりでcircleを使いたくても、svgとviewBoxの矩形のサイズが違うと意図どおりに表示できないので。

そんなわけで～～
svgタグのviewBox属性では、(0,0)から、svgの幅・高さをとる、ということ以外したくない。

Office 2016ではSVGのtextのdominant-baselineは効かない

 

引き続き、SVGのメモ。

SVGのtextタグのdominant-baseline属性は、本来文字列のタテ方向の位置決めの基準線を設定するはずなのだけど、例えばIEでは効かない。

以下の記事参照。

defghi1977.html.xdomain.jp

というかこのサイトつくってる方、すごい。

こちらのサイトからSVG例をいただきました。ありがとうございます。

 

そしてSVGをOfficeに貼った場合にも、この属性は効いていないようだ。

表示させた結果。Firefox 85.0の場合。

f:id:kojiynet:20210203184536p:plain

これが正しい表示なんでしょうなぁ。。

 

これに対して、Word 2016の場合。

f:id:kojiynet:20210203184751p:plain

Excel 2016の場合。

f:id:kojiynet:20210203184819p:plain

そしてPowerPoint 2016の場合。

f:id:kojiynet:20210203184837p:plain

 

はい、むー。。。

 

SVG→PNG→MOVとMP4　の変換

静止画から動画をつくる試行をした。

複数のSVG群　→　PNG群　→　MOVとMP4

の流れで。

具体的には

  • C++でSVG群を出力した。

  • InkscapeでSVGをPNGに変換した。
    このときのコマンドは
    $ Inkscape.com --export-width=500 --file=XXX001.svg --export-png=XXX001.png のようなもの。
    --without-guiもつけてもよいのかも。

  • ffmpegでPNG群をMOVにした。
    このときのコマンドは
    $ ffmpeg -r 30 -i XXX%03d.png -vcodec mpeg4 -qscale 0 -r 360 XXX.mov のようなもの。
    ただしバッチファイル内では%%が%に展開されるので修正が必要。

  • ffmpegでPNG群をMP4にした。
    このときのコマンドは
    $ ffmpeg -r 30 -i XXX%03d.png -vcodec libx264 -pix_fmt yuv420p -r 360 XXX.mp4
    のようなもの。
    上の同様にバッチファイル内では%%が%に展開されるので修正が必要。

注意点

シェル内でも、Inkscapeで大量の画像ファイルを1つ1つ変換するのにはかなり時間がかかる。 別の方法も試してみたい。