探究SVGとスクリーンショット

関連サイト

本書の関連ページが用意されています。

• NextPublishingオフィシャルWebサイト

内容紹介

本書は、SVG (Scalable Vector Graphics) とスクリーンショットについてまとめたものです。SVGの少し変わった使い方やウェブブラウザでのスクリーンショットの撮影と活用に興味がある、ウェブページをまるごと保存したい、高解像度ディスプレイで撮られたPNG形式のスクリーンショット画像の実寸サイズの取得方法を知りたい方を対象としています。

書誌情報

• 著者: daiiz
• 発行日: 2021-05-21 (紙書籍版発行日: 2021-05-21)
• 最終更新日: 2021-05-21
• バージョン: 1.0.0
• ページ数: 82ページ(PDF版換算)
• 対応フォーマット: PDF, EPUB
• 出版社: インプレス NextPublishing

対象読者

SVG,画像,フォーマット,画像フォーマット,スクリーンショット,実寸,サイズに興味がある人

著者について

daiiz

関心トピックはウェブブラウザや検索技術・検索UI、画像処理など。仕事ではFAQ検索システムHelpfeelを作る。趣味でもアプリの開発や要素技術の研究を行っており、これらの成果をまとめた技術同人誌の執筆も手掛けている。
Twitter: @daizplus / GitHub: @daiiz

目次

はじめに

• 本書について
• サンプルコード
• 著者紹介
• サークル紹介
• 免責事項
• 表記関係について
• 謝辞

第1章　簡単なSVG画像をつくる

• 1.1　テキストを扱う
• 1.2　ビットマップ画像を扱う
• 1.3　モノクロ化する
• 1.4　リンクを扱う

第2章　SVG Screenshot開発記

• 2.1　SVG Screenshotの種
• 2.2　元祖SVG Screenshot
• 2.3　PuppeteerでSVG Screenshotを撮る

第3章　高解像度ディスプレイで撮ったスクリーンショットを適切なサイズで表示する

• 3.1　はじめに
• 3.2　スクリーンショットをSVG形式で配信する
• 3.3　DPIを考慮するimg CustomElementをつくる
• 3.4　Content-DPRヘッダーを付与する
• 3.5　まとめ

第4章　ScreenshotMLの提案

• 4.1　SVG ScreenshotをXMLで表現する
• 4.2　ScreenshotMLのXML Schema
• 4.3　名前空間を定義する
• 4.4　XMLを検査する
• 4.5　XML + XSL → SVG

付録A　PNG画像のバイナリから解像度を読み取る

• A.1　PNG画像の解像度情報はどこに書かれているか
• A.2　解像度を算出する

付録B　Blinkでの画像のNaturalSizeの導出過程を追う

• B.1　調査ノート