Add svg rendering for error example (#3825)

* Add svg rendering for error example

* Use static svg error example

README.md

@@ -84,7 +84,9 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 The page will automatically reload if you make changes to the code.<br>
 You will see the build errors and lint warnings in the console.
 
-<img src='https://camo.githubusercontent.com/41678b3254cf583d3186c365528553c7ada53c6e/687474703a2f2f692e696d6775722e636f6d2f466e4c566677362e706e67' width='600' alt='Build errors'>
+<p align='center'>
+<img src='https://cdn.rawgit.com/marionebl/create-react-app/9f62826/screencast-error.svg' width='600' alt='Build errors'>
+</p>
 
 ### `npm test` or `yarn test`
 

package.json

@@ -13,6 +13,7 @@
     "publish": "tasks/publish.sh",
     "start": "cd packages/react-scripts && node bin/react-scripts.js start",
     "screencast": "node ./tasks/screencast.js",
+    "screencast:error": "svg-term --cast jyu19xGl88FQ3poMY8Hbmfw8y --out screencast-error.svg --window --at 12000 --no-cursor",
     "test": "cd packages/react-scripts && node bin/react-scripts.js test --env=jsdom",
     "format": "prettier --trailing-comma es5 --single-quote --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'",
     "precommit": "lint-staged"

screencast-error.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="825" height="595.25"><rect width="825" height="595.25" rx="5" ry="5" class="a"/><circle cx="20" cy="20" r="8.5" fill="#ff5f58"/><circle cx="47" cy="20" r="8.5" fill="#ffbd2e"/><circle cx="74" cy="20" r="8.5" fill="#18c132"/><svg height="542.75" viewBox="0 0 80 54.275" width="800" x="12.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="40"><style>.a{fill:#282d35}.g{fill:#e88388}.h{fill:#b9c0cb}.i{fill:#6f7783}.k{fill:#e88388;font-weight:700}.l{fill:#dbab79}.m{fill:#a8cc8c}</style><g font-size="1.67" font-family="Monaco,Consolas,Menlo,'Bitstream Vera Sans Mono','Powerline Symbols',monospace"><defs><symbol id="a"><path fill="transparent" d="M0 0h80v25H0z"/></symbol></defs><path class="a" d="M0 0h80v54.275H0z"/><svg width="80"><svg><use xlink:href="#a"/><text y="1.67" class="g">Failed</text><text x="7.014" y="1.67" class="g">to</text><text x="10.02" y="1.67" class="g">compile.</text><path class="h" d="M0 4.342h12v2.171H0z"/><text y="6.012" class="a">./src/App.js</text><text y="8.183" class="h">Syntax</text><text x="7.014" y="8.183" class="h">error:</text><text x="14.028" y="8.183" class="h">Unexpected</text><text x="25.05" y="8.183" class="h">token</text><text x="31.062" y="8.183" class="h">(8:7)</text><text x="3.006" y="12.525" class="i">6</text><text x="5.01" y="12.525" class="i">|</text><text x="9.018" y="12.525" class="h">render()</text><text x="18.036" y="12.525" class="h">{</text><text x="3.006" y="14.696" class="i">7</text><text x="5.01" y="14.696" class="i">|</text><text x="11.022" y="14.696" fill="#66c2cd">return</text><text x="18.036" y="14.696" class="h">(</text><text y="16.867" class="k">&gt;</text><text x="3.006" y="16.867" class="i">8</text><text x="5.01" y="16.867" class="i">|</text><text x="13.026" y="16.867" class="l">&lt;&lt;div</text><text x="19.038" y="16.867" class="h">className</text><text x="28.056" y="16.867" class="l">=</text><text x="29.058" y="16.867" class="m">&quot;App&quot;</text><text x="34.068" y="16.867" class="l">&gt;</text><text x="5.01" y="19.038" class="i">|</text><text x="14.028" y="19.038" class="k">^</text><text x="3.006" y="21.209" class="i">9</text><text x="5.01" y="21.209" class="i">|</text><text x="15.03" y="21.209" class="l">&lt;header</text><text x="23.046" y="21.209" class="h">className</text><text x="32.064" y="21.209" class="l">=</text><text x="33.066" y="21.209" class="m">&quot;App-header&quot;</text><text x="45.09" y="21.209" class="l">&gt;</text><text x="2.004" y="23.38" class="i">10</text><text x="5.01" y="23.38" class="i">|</text><text x="17.034" y="23.38" class="l">&lt;img</text><text x="22.044" y="23.38" class="h">src</text><text x="25.05" y="23.38" class="l">=</text><text x="26.052" y="23.38" class="h">{logo}</text><text x="33.066" y="23.38" class="h">className</text><text x="42.084" y="23.38" class="l">=</text><text x="43.086" y="23.38" class="m">&quot;App-logo&quot;</text><text x="54.108" y="23.38" class="h">alt</text><text x="57.114" y="23.38" class="l">=</text><text x="58.116" y="23.38" class="m">&quot;logo&quot;</text><text x="65.13" y="23.38" class="l">/&gt;</text><text x="2.004" y="25.551" class="i">11</text><text x="5.01" y="25.551" class="i">|</text><text x="17.034" y="25.551" class="l">&lt;h1</text><text x="21.042" y="25.551" class="h">className</text><text x="30.06" y="25.551" class="l">=</text><text x="31.062" y="25.551" class="m">&quot;App-title&quot;</text><text x="42.084" y="25.551" class="l">&gt;Welcome</text><text x="51.102" y="25.551" class="h">to</text><text x="54.108" y="25.551" class="l">React&lt;/h1&gt;</text></svg></svg></g></svg></svg>