HTML 上の SVG をダウンロードして PNG に変換する

やりたいこと

今日 (2024/12/25 (水))、PC 版の X (https://x.com/home) を開くと、ページの左上に謎のだるまがいました。

これは SVG のようです。可愛いのでこの SVG をダウンロードして PNG に変換したいです。

方法

前提

• Google Chome などのブラウザの開発者ツールで任意の JavaScript を実行できること。
• qlmanage コマンドが利用できること。
  • macOS にデフォルトで用意されています。

SVG のダウンロード

開発者ツールのコンソールで以下のコードを実行します。該当の SVG の XML 文字列をファイルとしてダウンロードするための擬似的なアンカー要素を作り、それをクリックするコードです。

const downloadSVG = ({ selector, filename }) => {
  const svg = document.querySelector(selector);
  svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');

  const blob = new Blob([svg.outerHTML]);

  const a = document.createElement('a');
  a.download = filename;
  a.href = window.URL.createObjectURL(blob);
  a.click();
  a.remove();
};

// selector の "r-4qtqp9" は可変なので、実際のクラス属性の値に置き換えること。
downloadSVG({ selector: 'header svg.r-4qtqp9', filename: 'x.svg' });

SVG を PNG に変換

以下のコマンドを実行すると ~/Downloads/x.svg.png に長辺が 1024px の PNG ファイルが生成されます。

$ qlmanage -t -s 1024 -o ~/Downloads/ ~/Downloads/x.svg

参考

• SVGの属性について理解する #SVG - Qiita
  • SVG を外部ファイルとして使用する場合は xmlns 属性が必須でした。
  • この属性を指定しないと PNG ファイルが真っ白になってしまいます。
• 【Mac】SVGからPNGへの変換を高画質で無料で行う方法 #Mac - Qiita
  • qlmanage コマンドについて調べました。