関連サイト
本書の関連ページが用意されています。
内容紹介
本書は、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 調査ノート