| <?xml version="1.0" encoding="utf-8"?> |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 240 320" preserveAspectRatio="none"> |
| |
| <!-- background - lightgrey rectangle horizontally and vertically exceeding viewBox --> |
| <rect x="-1000" y="-1000" fill="#66F" width="2240" height="2320"/> |
| |
| <defs> |
| <linearGradient id="bgGrad" x1="0" y1="0" x2="0.8" y2="1"> |
| <stop offset="0" stop-opacity="0" stop-color="#EEF"/> |
| <stop offset="0.8" stop-opacity="1" stop-color="#CDF"/> |
| <stop offset="1" stop-opacity="0.6" stop-color="#CDF"/> |
| </linearGradient> |
| </defs> |
| |
| <!-- border - stroked rectangle hinting dimensions of viewBox --> |
| <rect x="0" y="0" width="240" height="320" fill="url(#bgGrad)"/> |
| |
| <!-- some content --> |
| <g fill="#369" fill-opacity="0.3" text-anchor="middle" font-family="Georgia,Times,serif" transform="translate(60 70) skewX(-10) rotate(10 120 160) scale(0.6)"> |
| <text x="120" y="100" font-size="130">SVG</text> |
| <text x="120" y="166" font-size="106">back-</text> |
| <text x="120" y="230" font-size="80">ground</text> |
| <text x="120" y="300" font-size="90">image</text> |
| </g> |
| |
| <circle cx="-30" cy="290" r="250" fill="#FFF" fill-opacity="0.2"/> |
| <circle cx="-130" cy="320" r="270" fill="#FFF" fill-opacity="0.2"/> |
| </svg> |
