我經常思考，在面臨一個不確定問題時，以往的經驗究竟有無輔助作用？如果把經驗遺忘會產生何種程度的影響？在上下求索未果之后，如何找回曾經的感覺，恰若靈光一現？凡此種種，終是要思考總結的，這篇文章便是我的反思之作。

本篇文章會記述一些實用的svg與png之間的轉換技巧并強調一種思考原則。

概述

技巧

svg和png圖片轉換和下載 解決chrome data url too large下載問題 解決@ViewChild未及時刷新問題

原則

永遠從問題最近的地方開始分析

理解下面這些內容的前提是具備一些Angular的編程基礎，要求大致處于能自定義component的水平。

假意需求

當我說“假意需求”的時候，其實是將解決方案視作眼下的需求，目的是方便理解。在這個項目中，我們需要把頁面上的已經存在的svg元素轉換成可下載的svg和png鏈接。svg是矢量圖，適合打印成海報；而png清晰度有限，用作在線預覽。

背景知識

下面是svg(Scalable Vector Graphics)和canvas在編程方式、技術原理、使用范圍以及轉換程度這4個維度上的對比和評估。這些知識是理解實現svg轉換為png的基礎。

編程方式

svg是矢量圖形語言，canvas提供畫布標簽和繪制API；

svg提供各種圖形，濾鏡和動畫。canvas只有繪制API，相對原始。

技術原理

svg是矢量圖，提供了很多圖形，還有完整的動畫，事件機制，本身可以獨立使用；

canvas基于像素，是一種HTML元素，只能通過腳本繪制。

適用范圍

svg被主流瀏覽器和svg閱讀器支持，canvas只有主流瀏覽器支持；

svg適用于大面積渲染區域的程序和靜態文檔，如google地圖。canvas適合小范圍圖像密集型場景，如游戲。

轉換程度

svg較難以轉換成png或者jpeg格式的圖片，不過canvas較容易。

技巧

假設主頁面 app.component.html 面已經有一個component，它的內容如下：

<app-template #template></app-template>

其中 <app-template></app-template> 是一個自定義的component，它代表了一個svg文件，svg的內容存放在 template.component.html 中，而 template.component.ts 的定義如下：

// template.component.ts@Component({ selector: 'app-template', templateUrl: './template.component.html', styleUrls: ['./template.component.scss'],})export class TemplateComponent implements OnInit { ngOnInit() { }}

當然，這個template.component需要在 app.module.ts 中聲明后才能在 app.component.html 中使用。

注意， #template 是Angular5之后引入的語法，它的全稱是 Template reference variable (#var) ，功能在于引用其所指向的DOM元素。