SVG iPhone屏幕分辨率/设备像素比终极指南

The Ultimate Guide To iPhone Resolutions Source: http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2215
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<rect id="rectangle10" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="1179" y="1640" width="210" height="430" />
    <rect id="rectangle158" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="1700" y="0" width="210" height="210" />
    <rect id="rectangle159" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="1180" y="0" width="210" height="210" />
    <rect id="rectangle160" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="920" y="0" width="210" height="210" />
    <rect id="rectangle9" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="1180" y="1220" width="210" height="330" />
    <rect id="rectangle6" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="1180" y="730" width="210" height="400" />
    <rect id="rectangle7" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="1180" y="250" width="210" height="400" />
    <rect id="rectangle8" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="1700" y="250" width="210" height="400" />
    <rect id="rectangle26" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="1960" y="250" width="210" height="400" />
    <path id="bezier5" stroke="rgb(221, 221, 221)" stroke-miterlimit="10" fill="none" d="M 40,688.5 L 2210,688.5" />
    <path id="bezier2" stroke="rgb(221, 221, 221)" stroke-miterlimit="10" fill="none" d="M 40,1595.5 L 2210,1595.5" />
    <path id="bezier" stroke="rgb(221, 221, 221)" stroke-miterlimit="10" fill="none" d="M 40,1174.5 L 2210,1174.5" />
    <rect id="rectangle47" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="1700" y="1640" width="210" height="430" />
    <g id="iPhone6">
        <rect id="rectangle79" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="1195" y="1641" width="178" height="366" rx="21.67" />
        <rect id="rectangle80" stroke="none" fill="rgb(141, 148, 159)" x="1192" y="1685" width="2" height="18" />
        <rect id="rectangle81" stroke="none" fill="rgb(141, 148, 159)" x="1192" y="1719" width="2" height="27" />
        <rect id="rectangle82" stroke="none" fill="rgb(141, 148, 159)" x="1192" y="1751" width="2" height="27" />
        <rect id="rectangle83" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="1268" y="1663" width="30" height="4" rx="2" />
        <rect id="rectangle84" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="1252" y="1662" width="6" height="6" rx="3" />
        <rect id="rectangle85" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="1281" y="1650" width="4" height="4" rx="2" />
        <circle id="oval5" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" cx="1283" cy="1984" r="13" />
    </g>
    <g id="iPhone6Plus">
        <rect id="rectangle71" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="1701" y="1641" width="208" height="422" rx="21.67" />
        <rect id="rectangle72" stroke="none" fill="rgb(141, 148, 159)" x="1698" y="1689" width="2" height="18" />
        <rect id="rectangle73" stroke="none" fill="rgb(141, 148, 159)" x="1698" y="1722" width="2" height="27" />
        <rect id="rectangle74" stroke="none" fill="rgb(141, 148, 159)" x="1698" y="1756" width="2" height="27" />
        <rect id="rectangle75" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="1789" y="1665" width="30" height="4" rx="2" />
        <rect id="rectangle76" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="1772" y="1664" width="6" height="6" rx="3" />
        <rect id="rectangle77" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="1802" y="1652" width="4" height="4" rx="2" />
        <circle id="oval4" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" cx="1804" cy="2040" r="14" />
    </g>
    <rect id="rectangle31" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="1207" y="251" width="160" height="284" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="1227.8" y="251" text-anchor="middle">
        <tspan x="1287" y="401">320 &#0215; 568</tspan>
    </text>
    <rect id="rectangle32" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="1711" y="251" width="188" height="334" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="1745.8" y="251" text-anchor="middle">
        <tspan x="1805" y="426">375 &#0215; 667</tspan>
    </text>
    <rect id="rectangle33" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="40" y="250" width="310" height="400" />
    <rect id="rectangle27" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="1700" y="730" width="210" height="400" />
    <rect id="rectangle36" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="40" y="730" width="310" height="400" />
    <rect id="rectangle39" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="1711" y="731" width="188" height="334" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="1730.92" y="731" text-anchor="middle">
        <tspan x="1805" y="906">1125 &#0215; 2001</tspan>
    </text>
    <rect id="rectangle43" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="40" y="1220" width="310" height="330" />
    <rect id="rectangle50" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="40" y="1640" width="310" height="430" />
    <rect id="rectangle52" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="1207" y="1685" width="154" height="278" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="1258.79" y="1685" text-anchor="middle">
        <tspan x="1284" y="1832">4.7″</tspan>
    </text>
    <rect id="rectangle53" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="1713" y="1687" width="184" height="326" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="1779.79" y="1687" text-anchor="middle">
        <tspan x="1805" y="1858">5.5″</tspan>
    </text>
    <rect id="rectangle54" stroke="none" fill="rgb(255, 203, 87)" fill-opacity="0" x="24" y="1270" width="326" height="295" />
    <text fill="rgb(141, 148, 159)" font-family="AvenirNext-Regular, 'Avenir Next', sans-serif" font-size="24" x="85.59" y="1270" text-anchor="end">
        <tspan x="335" y="1294">The device screen may </tspan>
        <tspan x="335" y="1327">have lower pixel resolution </tspan>
        <tspan x="335" y="1360">than the image rendered </tspan>
        <tspan x="335" y="1393">in previous step.
        </tspan>
        <tspan x="335" y="1435">
        </tspan>
        <tspan x="335" y="1459">Before the image can be </tspan>
        <tspan x="335" y="1492">displayed, it must be </tspan>
        <tspan x="335" y="1525">downsampled (resized) to </tspan>
        <tspan x="335" y="1558">lower pixel resolution.</tspan>
    </text>
    <rect id="rectangle55" stroke="none" fill="rgb(255, 203, 87)" fill-opacity="0" x="39" y="1220" width="310" height="50" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="30" x="137.8" y="1224" text-anchor="end">
        <tspan x="334" y="1254">Physical Pixels</tspan>
    </text>
    <rect id="rectangle56" stroke="none" fill="rgb(255, 203, 87)" fill-opacity="0" x="40" y="300" width="310" height="350" />
    <text fill="rgb(141, 148, 159)" font-family="AvenirNext-Regular, 'Avenir Next', sans-serif" font-size="24" x="144.56" y="300" text-anchor="end">
        <tspan x="335" y="324">At the beginning, </tspan>
        <tspan x="335" y="357">coordinates of all </tspan>
        <tspan x="335" y="390">drawings are specified in
        </tspan>
        <tspan x="335" y="432">
        </tspan>
        <tspan x="335" y="465">
        </tspan>
        <tspan x="335" y="489">Points are abstract units, </tspan>
        <tspan x="335" y="522">they only make sense in </tspan>
        <tspan x="335" y="555">this mathematical </tspan>
        <tspan x="335" y="588">coordinate space.</tspan>
    </text>
    <rect id="rectangle57" stroke="none" fill="rgb(255, 203, 87)" fill-opacity="0" x="40" y="250" width="310" height="50" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="30" x="252.38" y="254" text-anchor="end">
        <tspan x="335" y="284">Points</tspan>
    </text>
    <rect id="rectangle58" stroke="none" fill="rgb(255, 203, 87)" fill-opacity="0" x="24" y="781" width="326" height="349" />
    <text fill="rgb(141, 148, 159)" font-family="AvenirNext-Regular, 'Avenir Next', sans-serif" font-size="24" x="58.26" y="781" text-anchor="end">
        <tspan x="335" y="805">Point-based drawings are </tspan>
        <tspan x="335" y="838">rendered into pixels. This </tspan>
        <tspan x="335" y="871">process is known as </tspan>
        <tspan x="335" y="904">rasterization.
        </tspan>
        <tspan x="335" y="946">
        </tspan>
        <tspan x="335" y="970">Point coordinates are </tspan>
        <tspan x="335" y="1003">multiplied by scale factor </tspan>
        <tspan x="335" y="1036">to get pixel coordinates. </tspan>
        <tspan x="335" y="1069">Higher scale factors result </tspan>
        <tspan x="335" y="1102">in higher level of detail.</tspan>
    </text>
    <rect id="rectangle59" stroke="none" fill="rgb(255, 203, 87)" fill-opacity="0" x="40" y="730" width="310" height="50" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="30" x="113.75" y="734" text-anchor="end">
        <tspan x="335" y="764">Rendered Pixels</tspan>
    </text>
    <rect id="rectangle60" stroke="none" fill="rgb(255, 203, 87)" fill-opacity="0" x="24" y="1690" width="326" height="380" />
    <text fill="rgb(141, 148, 159)" font-family="AvenirNext-Regular, 'Avenir Next', sans-serif" font-size="24" x="71.91" y="1690" text-anchor="end">
        <tspan x="335" y="1714">Finally, computed pixels </tspan>
        <tspan x="335" y="1747">are displayed on the </tspan>
        <tspan x="335" y="1780">physical screen.
        </tspan>
        <tspan x="335" y="1822">
        </tspan>
        <tspan x="335" y="1846">The PPI number tells you </tspan>
        <tspan x="335" y="1879">how many pixels fit into </tspan>
        <tspan x="335" y="1912">one inch and thus how </tspan>
        <tspan x="335" y="1945">large the pixels appear in </tspan>
        <tspan x="335" y="1978">the real world.</tspan>
    </text>
    <rect id="rectangle61" stroke="none" fill="rgb(255, 203, 87)" fill-opacity="0" x="40" y="1640" width="310" height="50" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="30" x="122.12" y="1644" text-anchor="end">
        <tspan x="335" y="1674">Physical Device</tspan>
    </text>
    <path id="rectangle63" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 1287,536 L 1287,729" />
    <path id="bezier3" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 1811.5,722.5 L 1805,729 1798.5,722.5" />
    <path id="rectangle64" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 1805,585 L 1805,730" />
    <rect id="rectangle4" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="1223" y="1221" width="126" height="222" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="1232.69" y="1221" text-anchor="middle">
        <tspan x="1286" y="1338">750 &#0215; 1334</tspan>
    </text>
    <path id="bezier4" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 1293.5,722.5 L 1287,729 1280.5,722.5" />
    <path id="rectangle67" stroke="rgb(235, 0, 56)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 1285,922 L 1285,1218" />
    <path id="bezier7" stroke="rgb(235, 0, 56)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 1291.5,1212.5 L 1285,1219 1278.5,1212.5" />
    <path id="bezier8" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 1290.5,1632.5 L 1284,1639 1277.5,1632.5" />
    <path id="rectangle69" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 1284,1444 L 1284,1638" />
    <path id="bezier9" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 1811.5,1632.5 L 1805,1639 1798.5,1632.5" />
    <path id="rectangle70" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 1805,1542 C 1805,1542 1805,1614.75 1805,1639" />
    <path id="bezier11" stroke="rgb(235, 0, 56)" stroke-miterlimit="10" stroke-dasharray="4,4" stroke-dashoffset="0" fill="none" d="M 1233.5,922.5 C 1233.5,922.5 1233.5,989.92 1233.5,1038.62 1233.5,1087.33 1222.5,1092.54 1222.5,1130.81 1222.5,1169.08 1222.5,1220.5 1222.5,1220.5"
    />
    <circle id="oval62" stroke="none" fill="rgb(235, 0, 56)" cx="1349" cy="1221" r="3" />
    <path id="bezier13" stroke="rgb(141, 148, 159)" stroke-width="2" stroke-miterlimit="10" fill="rgb(141, 148, 159)" fill-opacity="0.1" d="M 1208,1962 L 1269.11,1851.36 M 1300.95,1793.71 L 1361,1685" />
    <path id="bezier14" stroke="rgb(141, 148, 159)" stroke-width="2" stroke-miterlimit="10" fill="rgb(141, 148, 159)" fill-opacity="0.1" d="M 1714,2013 L 1790.11,1877.42 M 1822.95,1818.92 L 1897,1687" />
    <rect id="rectangle104" stroke="none" fill="rgb(255, 203, 87)" fill-opacity="0" x="1180" y="151" width="210" height="40" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="1234.4" y="155" text-anchor="middle">
        <tspan x="1285" y="180">iPhone 6</tspan>
    </text>
    <rect id="rectangle105" stroke="none" fill="rgb(255, 203, 87)" fill-opacity="0" x="1700" y="151" width="210" height="40" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="1727.76" y="155" text-anchor="middle">
        <tspan x="1805" y="180">iPhone 6 Plus</tspan>
    </text>
    <g id="iPhone">
        <rect id="rectangle106" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="1257" y="25" width="58" height="122" rx="9" />
        <rect id="rectangle107" stroke="none" fill="rgb(141, 148, 159)" x="1255" y="39" width="1" height="6" />
        <rect id="rectangle108" stroke="none" fill="rgb(141, 148, 159)" x="1255" y="50" width="1" height="9" />
        <rect id="rectangle109" stroke="none" fill="rgb(141, 148, 159)" x="1255" y="61" width="1" height="9" />
        <rect id="rectangle110" stroke="none" fill="rgb(141, 148, 159)" x="1281" y="31" width="10" height="2" rx="1" />
        <rect id="rectangle111" stroke="none" fill="rgb(141, 148, 159)" x="1276" y="31" width="2" height="2" rx="1" />
        <circle id="oval7" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" cx="1286" cy="139" r="4" />
    </g>
    <g id="iPhone6Plus2">
        <rect id="rectangle113" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="1767" y="5" width="68" height="142" rx="9" />
        <rect id="rectangle114" stroke="none" fill="rgb(141, 148, 159)" x="1765" y="21" width="1" height="6" />
        <rect id="rectangle115" stroke="none" fill="rgb(141, 148, 159)" x="1765" y="32" width="1" height="9" />
        <rect id="rectangle116" stroke="none" fill="rgb(141, 148, 159)" x="1765" y="44" width="1" height="9" />
        <rect id="rectangle117" stroke="none" fill="rgb(141, 148, 159)" x="1796" y="13" width="11" height="2" rx="1" />
        <rect id="rectangle118" stroke="none" fill="rgb(141, 148, 159)" x="1791" y="13" width="2" height="2" rx="1" />
        <circle id="oval8" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" cx="1801" cy="138" r="4" />
        <rect id="rectangle119" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="1801" y="9" width="1" height="1" rx="0.5" />
    </g>
    <rect id="rectangle127" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="1261" y="39" width="50" height="92" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="12" x="1273.9" y="39" text-anchor="middle">
        <tspan x="1286" y="89">4.7″</tspan>
    </text>
    <rect id="rectangle128" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="1771" y="21" width="60" height="108" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="12" x="1788.9" y="21" text-anchor="middle">
        <tspan x="1801" y="79">5.5″</tspan>
    </text>
    <circle id="oval3" stroke="none" fill="rgb(235, 0, 56)" cx="1223" cy="1221" r="3" />
    <rect id="rectangle" stroke="none" fill="rgb(255, 203, 87)" fill-opacity="0" x="40" y="397" width="310" height="40" />
    <text fill="rgb(141, 148, 159)" font-family="AvenirNext-Italic, 'Avenir Next', sans-serif" font-style="italic" font-size="24" x="261.51" y="397" text-anchor="end">
        <tspan x="335" y="421">points.</tspan>
    </text>
    <rect id="text9" stroke="rgb(65, 153, 231)" stroke-width="2" fill="rgb(255, 255, 255)" x="1735" y="673" width="140" height="30" rx="7" />
    <text fill="rgb(65, 153, 231)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="1748.09" y="673" text-anchor="middle">
        <tspan x="1805" y="694">render at 3&#0215;</tspan>
    </text>
    <rect id="text8" stroke="rgb(65, 153, 231)" stroke-width="2" fill="rgb(255, 255, 255)" x="1217" y="673" width="140" height="30" rx="7" />
    <text fill="rgb(65, 153, 231)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="1230.09" y="673" text-anchor="middle">
        <tspan x="1287" y="694">render at 2&#0215;</tspan>
    </text>
    <path id="bezier6" stroke="rgb(221, 221, 221)" stroke-miterlimit="10" fill="none" d="M 40,229.5 L 2210,229.5" />
    <rect id="rectangle2" stroke="none" fill="rgb(255, 203, 87)" fill-opacity="0" x="1180" y="187" width="210" height="35" />
    <text fill="rgb(235, 0, 56)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="19" x="1224.76" y="191" text-anchor="middle">
        <tspan x="1285" y="210">Display Zoom</tspan>
    </text>
    <rect id="rectangle3" stroke="none" fill="rgb(255, 203, 87)" fill-opacity="0" x="1700" y="187" width="210" height="35" />
    <text fill="rgb(235, 0, 56)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="19" x="1744.76" y="191" text-anchor="middle">
        <tspan x="1805" y="210">Display Zoom</tspan>
    </text>

<text fill="rgb(0, 0, 0)" fill-opacity="0.41" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="18" x="1225.7" y="1349" text-anchor="middle">
        <tspan x="1285" y="1365">(device pixels)</tspan>
    </text>
    <rect id="rectangle13" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="1700" y="1220" width="210" height="330" />
    <rect id="rectangle14" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="1960" y="1640" width="210" height="430" />
    <g id="iPhone6Plus3">
        <rect id="rectangle15" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="1961" y="1641" width="208" height="422" rx="21.67" />
        <rect id="rectangle16" stroke="none" fill="rgb(141, 148, 159)" x="1958" y="1689" width="2" height="18" />
        <rect id="rectangle17" stroke="none" fill="rgb(141, 148, 159)" x="1958" y="1722" width="2" height="27" />
        <rect id="rectangle18" stroke="none" fill="rgb(141, 148, 159)" x="1958" y="1756" width="2" height="27" />
        <rect id="rectangle19" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="2049" y="1665" width="30" height="4" rx="2" />
        <rect id="rectangle20" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="2032" y="1664" width="6" height="6" rx="3" />
        <rect id="rectangle21" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="2062" y="1652" width="4" height="4" rx="2" />
        <circle id="oval6" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" cx="2064" cy="2040" r="14" />
    </g>
    <rect id="rectangle22" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="1961" y="251" width="208" height="368" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="2005.8" y="251" text-anchor="middle">
        <tspan x="2065" y="443">414 &#0215; 736</tspan>
    </text>
    <rect id="rectangle23" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="1960" y="730" width="210" height="400" />
    <rect id="rectangle24" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="1961" y="731" width="206" height="368" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="1989.92" y="731" text-anchor="middle">
        <tspan x="2064" y="923">1242 &#0215; 2208</tspan>
    </text>
    <rect id="rectangle40" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="1960" y="1220" width="210" height="330" />
    <rect id="rectangle46" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="1975" y="1221" width="180" height="320" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="1990.92" y="1221" text-anchor="middle">
        <tspan x="2065" y="1389">1080 &#0215; 1920</tspan>
    </text>
    <rect id="rectangle25" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="1973" y="1687" width="184" height="326" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="2039.79" y="1687" text-anchor="middle">
        <tspan x="2065" y="1858">5.5″</tspan>
    </text>
    <path id="rectangle28" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 2065,619 L 2065,730" />
    <path id="bezier10" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 2071.5,722.5 L 2065,729 2058.5,722.5" />
    <path id="rectangle29" stroke="rgb(235, 0, 56)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 2065,1100 L 2065,1218" />
    <path id="bezier15" stroke="rgb(235, 0, 56)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 2071.5,1212.5 L 2065,1219 2058.5,1212.5" />
    <path id="rectangle30" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 2063,1542 C 2063,1542 2063,1614.75 2063,1639" />
    <path id="bezier16" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 2069.5,1632.5 L 2063,1639 2056.5,1632.5" />
    <path id="bezier17" stroke="rgb(235, 0, 56)" stroke-miterlimit="10" stroke-dasharray="4,4" stroke-dashoffset="0" fill="none" d="M 1961,1097 C 1961,1129.49 1975.5,1132.97 1975.5,1158.5 L 1975.5,1221.5" />
    <path id="bezier18" stroke="rgb(235, 0, 56)" stroke-miterlimit="10" stroke-dasharray="4,4" stroke-dashoffset="0" fill="none" d="M 2167,1097 C 2167,1129.84 2154.5,1132.69 2154.5,1158.5 2154.5,1184.31 2154.5,1220.5 2154.5,1220.5" />
    <circle id="oval9" stroke="none" fill="rgb(235, 0, 56)" cx="2155" cy="1221" r="3" />
    <circle id="oval10" stroke="none" fill="rgb(235, 0, 56)" cx="2167" cy="1099" r="3" />
    <circle id="oval11" stroke="none" fill="rgb(235, 0, 56)" cx="1961" cy="1099" r="3" />
    <circle id="oval12" stroke="none" fill="rgb(235, 0, 56)" cx="1975" cy="1221" r="3" />
    <rect id="text7" stroke="rgb(65, 153, 231)" stroke-width="2" fill="rgb(255, 255, 255)" x="1975" y="1581" width="176" height="30" rx="7" />
    <text fill="rgb(65, 153, 231)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="1990.32" y="1581" text-anchor="middle">
        <tspan x="2063" y="1602">show at 401 PPI</tspan>
    </text>

<text fill="rgb(0, 0, 0)" fill-opacity="0.41" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="2033.99" y="937" text-anchor="middle">
        <tspan x="2067" y="958">(pixels)</tspan>
    </text>

<text fill="rgb(0, 0, 0)" fill-opacity="0.41" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="2028.62" y="455" text-anchor="middle">
        <tspan x="2063.5" y="476">(points)</tspan>
    </text>

<text fill="rgb(0, 0, 0)" fill-opacity="0.41" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="1997.61" y="1402" text-anchor="middle">
        <tspan x="2063.5" y="1419">(device pixels)</tspan>
    </text>
    <path id="bezier19" stroke="rgb(141, 148, 159)" stroke-width="2" stroke-miterlimit="10" fill="rgb(141, 148, 159)" fill-opacity="0.1" d="M 1974,2014 L 2050.11,1878.01 M 2082.95,1819.32 L 2157,1687" />
    <rect id="rectangle102" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="1960" y="0" width="210" height="210" />
    <rect id="rectangle37" stroke="none" fill="rgb(255, 203, 87)" fill-opacity="0" x="1960" y="151" width="211" height="40" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="1988.26" y="155" text-anchor="middle">
        <tspan x="2065.5" y="180">iPhone 6 Plus</tspan>
    </text>
    <g id="iPhone6Plus4">
        <rect id="rectangle41" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="2031" y="5" width="68" height="142" rx="9" />
        <rect id="rectangle42" stroke="none" fill="rgb(141, 148, 159)" x="2029" y="21" width="1" height="6" />
        <rect id="rectangle44" stroke="none" fill="rgb(141, 148, 159)" x="2029" y="32" width="1" height="9" />
        <rect id="rectangle45" stroke="none" fill="rgb(141, 148, 159)" x="2029" y="44" width="1" height="9" />
        <rect id="rectangle48" stroke="none" fill="rgb(141, 148, 159)" x="2060" y="13" width="10" height="2" rx="1" />
        <rect id="rectangle49" stroke="none" fill="rgb(141, 148, 159)" x="2055" y="13" width="2" height="2" rx="1" />
        <rect id="rectangle51" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="2064" y="9" width="1" height="1" rx="0.5" />
        <circle id="oval13" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" cx="2065" cy="138" r="4" />
    </g>
    <rect id="rectangle62" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="2035" y="21" width="60" height="108" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="12" x="2052.9" y="21" text-anchor="middle">
        <tspan x="2065" y="79">5.5″</tspan>
    </text>
    <rect id="text11" stroke="rgb(65, 153, 231)" stroke-width="2" fill="rgb(255, 255, 255)" x="1995" y="673" width="140" height="30" rx="7" />
    <text fill="rgb(65, 153, 231)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="2008.09" y="673" text-anchor="middle">
        <tspan x="2065" y="694">render at 3&#0215;</tspan>
    </text>
    <rect id="rectangle11" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="1440" y="1640" width="210" height="430" />
    <g id="iPhone2">
        <rect id="rectangle65" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="1457" y="1641" width="178" height="366" rx="21.67" />
        <rect id="rectangle66" stroke="none" fill="rgb(141, 148, 159)" x="1454" y="1685" width="2" height="18" />
        <rect id="rectangle68" stroke="none" fill="rgb(141, 148, 159)" x="1454" y="1719" width="2" height="27" />
        <rect id="rectangle86" stroke="none" fill="rgb(141, 148, 159)" x="1454" y="1751" width="2" height="27" />
        <rect id="rectangle87" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="1530" y="1663" width="31" height="4" rx="2" />
        <rect id="rectangle88" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="1514" y="1662" width="6" height="6" rx="3" />
        <rect id="rectangle89" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="1543" y="1650" width="4" height="4" rx="2" />
        <ellipse id="oval14" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" cx="1545.5" cy="1984" rx="13.5" ry="13" />
    </g>
    <rect id="rectangle90" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="1440" y="250" width="210" height="400" />
    <rect id="rectangle91" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="1453" y="251" width="188" height="334" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="1487.8" y="251" text-anchor="middle">
        <tspan x="1547" y="426">375 &#0215; 667</tspan>
    </text>
    <rect id="rectangle92" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="1440" y="730" width="210" height="400" />
    <rect id="rectangle93" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="1483" y="731" width="126" height="222" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="1492.69" y="731" text-anchor="middle">
        <tspan x="1546" y="848">750 &#0215; 1334</tspan>
    </text>
    <rect id="rectangle94" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="1440" y="1220" width="210" height="330" />
    <rect id="rectangle98" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="1469" y="1685" width="154" height="278" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="1520.79" y="1685" text-anchor="middle">
        <tspan x="1546" y="1832">4.7″</tspan>
    </text>
    <path id="rectangle99" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 1545,585 L 1545,728" />
    <path id="bezier20" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 1551.5,722.5 L 1545,729 1538.5,722.5" />
    <path id="rectangle101" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 1545,954 L 1545,1452" />
    <path id="rectangle103" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 1545,1442 L 1545,1640" />
    <path id="bezier21" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 1551.5,1632.5 L 1545,1639 1538.5,1632.5" />
    <path id="bezier22" stroke="rgb(141, 148, 159)" stroke-width="2" stroke-miterlimit="10" fill="rgb(141, 148, 159)" fill-opacity="0.1" d="M 1468,1962 L 1529.51,1851.36 M 1561.56,1793.71 L 1622,1685" />
    <rect id="rectangle122" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="1440" y="0" width="210" height="210" />
    <rect id="rectangle123" stroke="none" fill="rgb(255, 203, 87)" fill-opacity="0" x="1441" y="151" width="210" height="40" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="1495.4" y="155" text-anchor="middle">
        <tspan x="1546" y="180">iPhone 6</tspan>
    </text>
    <rect id="text13" stroke="rgb(65, 153, 231)" stroke-width="2" fill="rgb(255, 255, 255)" x="1477" y="673" width="140" height="30" rx="7" />
    <text fill="rgb(65, 153, 231)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="1490.09" y="673" text-anchor="middle">
        <tspan x="1547" y="694">render at 2&#0215;</tspan>
    </text>
    <rect id="rectangle134" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="1715" y="1221" width="180" height="320" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="1730.92" y="1221" text-anchor="middle">
        <tspan x="1805" y="1389">1080 &#0215; 1920</tspan>
    </text>

<text fill="rgb(0, 0, 0)" fill-opacity="0.41" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="1739.11" y="1402" text-anchor="middle">
        <tspan x="1805" y="1419">(device pixels)</tspan>
    </text>
    <path id="rectangle136" stroke="rgb(235, 0, 56)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 1805,1066 L 1805,1220" />
    <path id="bezier23" stroke="rgb(235, 0, 56)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 1811.5,1212.5 L 1805,1219 1798.5,1212.5" />
    <circle id="oval16" stroke="none" fill="rgb(235, 0, 56)" cx="1895" cy="1221" r="3" />
    <circle id="oval17" stroke="none" fill="rgb(235, 0, 56)" cx="1899" cy="1064" r="3" />
    <circle id="oval18" stroke="none" fill="rgb(235, 0, 56)" cx="1712" cy="1064" r="3" />
    <circle id="oval19" stroke="none" fill="rgb(235, 0, 56)" cx="1715" cy="1221" r="3" />
    <path id="bezier24" stroke="rgb(235, 0, 56)" stroke-miterlimit="10" stroke-dasharray="4,4" stroke-dashoffset="0" fill="none" d="M 1711.5,1061.5 C 1711.5,1061.5 1711.5,1072.33 1711.5,1102.12 1711.5,1131.91 1715.5,1135.1 1715.5,1158.5 1715.5,1181.9 1715.5,1221.5 1715.5,1221.5"
    />
    <path id="bezier25" stroke="rgb(235, 0, 56)" stroke-miterlimit="10" stroke-dasharray="4,4" stroke-dashoffset="0" fill="none" d="M 1899.5,1062.5 C 1899.5,1062.5 1899.5,1072.87 1899.5,1102.35 1899.5,1131.83 1895.5,1135.34 1895.5,1158.5 1895.5,1181.66 1895.5,1220.5 1895.5,1220.5"
    />
    <rect id="rectangle137" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="920" y="1220" width="210" height="330" />
    <rect id="rectangle138" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="920" y="730" width="210" height="400" />
    <rect id="rectangle139" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="920" y="250" width="210" height="400" />
    <rect id="rectangle140" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="920" y="1640" width="210" height="430" />
    <rect id="rectangle148" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="947" y="251" width="160" height="284" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="967.8" y="251" text-anchor="middle">
        <tspan x="1027" y="401">320 &#0215; 568</tspan>
    </text>
    <rect id="rectangle149" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="973" y="731" width="106" height="190" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="977.69" y="731" text-anchor="middle">
        <tspan x="1026" y="832">640&#0215;1136</tspan>
    </text>
    <path id="rectangle151" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 1027,535 L 1027,729" />
    <path id="bezier26" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 1033.5,722.5 L 1027,729 1020.5,722.5" />
    <path id="bezier28" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 1031.5,1632.5 L 1025,1639 1018.5,1632.5" />
    <path id="rectangle154" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 1025,921 L 1025,1641" />
    <rect id="rectangle157" stroke="none" fill="rgb(255, 203, 87)" fill-opacity="0" x="920" y="151" width="210" height="40" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="955.41" y="155" text-anchor="middle">
        <tspan x="1025" y="180">iPhone 5, 5s</tspan>
    </text>
    <rect id="text18" stroke="rgb(65, 153, 231)" stroke-width="2" fill="rgb(255, 255, 255)" x="957" y="673" width="140" height="30" rx="7" />
    <text fill="rgb(65, 153, 231)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="970.09" y="673" text-anchor="middle">
        <tspan x="1027" y="694">render at 2&#0215;</tspan>
    </text>
    <g id="iPhone7">
        <rect id="rectangle166" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="1001" y="37" width="52" height="108" rx="8.07" />
        <rect id="rectangle168" stroke="none" fill="rgb(141, 148, 159)" x="1000" y="51" width="1" height="5" />
        <rect id="rectangle169" stroke="none" fill="rgb(141, 148, 159)" x="1000" y="61" width="1" height="5" />
        <rect id="rectangle170" stroke="none" fill="rgb(141, 148, 159)" x="1000" y="70" width="1" height="5" />
        <rect id="rectangle171" stroke="none" fill="rgb(141, 148, 159)" x="1023" y="43" width="9" height="2" rx="1" />
        <circle id="oval26" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" cx="1026.5" cy="138.5" r="3.5" />
    </g>
    <rect id="rectangle174" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="1005" y="49" width="44" height="82" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="12" x="1020.03" y="49" text-anchor="middle">
        <tspan x="1027" y="94">4″</tspan>
    </text>
    <rect id="rectangle141" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="949" y="1641" width="156" height="328" rx="22" />
    <rect id="rectangle142" stroke="none" fill="rgb(141, 148, 159)" x="946" y="1686" width="2" height="15" />
    <rect id="rectangle143" stroke="none" fill="rgb(141, 148, 159)" x="946" y="1717" width="2" height="12" />
    <rect id="rectangle144" stroke="none" fill="rgb(141, 148, 159)" x="946" y="1744" width="2" height="12" />
    <rect id="rectangle145" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="1013" y="1667" width="27" height="4" rx="2" />
    <rect id="rectangle146" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="1023" y="1654" width="6" height="6" rx="3" />
    <rect id="rectangle147" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="1003" y="1667" width="4" height="4" rx="2" />
    <circle id="oval20" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" cx="1027" cy="1947" r="13" />
    <rect id="rectangle150" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="959" y="1685" width="136" height="240" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="1012.48" y="1685" text-anchor="middle">
        <tspan x="1027" y="1813">4″</tspan>
    </text>
    <rect id="rectangle161" stroke="none" fill="rgb(141, 148, 159)" x="1053" y="1639" width="26" height="2" />
    <path id="bezier31" stroke="rgb(141, 148, 159)" stroke-width="2" stroke-miterlimit="10" fill="rgb(141, 148, 159)" fill-opacity="0.1" d="M 960,1926 L 1013.92,1829.74 M 1042.02,1779.58 L 1095,1685" />
    <rect id="rectangle162" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="660" y="1640" width="210" height="430" />
    <g id="originalIPhone">
        <rect id="rectangle163" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="687" y="1641" width="156" height="300" rx="23.33" />
        <rect id="rectangle164" stroke="none" fill="rgb(141, 148, 159)" x="684" y="1669" width="2" height="14" />
        <rect id="rectangle165" stroke="none" fill="rgb(141, 148, 159)" x="684" y="1694" width="2" height="19" />
        <rect id="rectangle172" stroke="none" fill="rgb(141, 148, 159)" x="684" y="1727" width="2" height="20" />
        <rect id="rectangle175" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="750" y="1667" width="29" height="4" rx="2" />
        <circle id="oval24" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" cx="764.5" cy="1915.5" r="13.5" />
        <rect id="rectangle176" stroke="none" fill="rgb(141, 148, 159)" x="791" y="1638" width="27" height="3" />
    </g>
    <rect id="rectangle177" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="660" y="250" width="210" height="400" />
    <path id="rectangle178" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 767,491 L 767,728" />
    <path id="bezier43" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 773.5,722.5 L 767,729 760.5,722.5" />
    <rect id="rectangle179" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="685" y="251" width="160" height="240" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="705.8" y="251" text-anchor="middle">
        <tspan x="765" y="379">320 &#0215; 480</tspan>
    </text>
    <rect id="rectangle180" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="660" y="730" width="210" height="400" />
    <rect id="rectangle181" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="713" y="731" width="106" height="160" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="718.64" y="731" text-anchor="middle">
        <tspan x="766" y="817">640 &#0215; 960</tspan>
    </text>
    <rect id="rectangle182" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="660" y="1220" width="210" height="330" />
    <rect id="rectangle183" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="697" y="1687" width="136" height="202" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="739.79" y="1687" text-anchor="middle">
        <tspan x="765" y="1796">3.5″</tspan>
    </text>
    <path id="rectangle184" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 765,892 L 765,1639" />
    <path id="bezier32" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 771.5,1632.5 L 765,1639 758.5,1632.5" />
    <rect id="text2" stroke="rgb(65, 153, 231)" stroke-width="2" fill="rgb(255, 255, 255)" x="695" y="673" width="140" height="30" rx="7" />
    <text fill="rgb(65, 153, 231)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="708.09" y="673" text-anchor="middle">
        <tspan x="765" y="694">render at 2&#0215;</tspan>
    </text>

<text fill="rgb(0, 0, 0)" fill-opacity="0.41" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="732.49" y="827" text-anchor="middle">
        <tspan x="765.5" y="844">(pixels)</tspan>
    </text>
    <path id="bezier33" stroke="rgb(141, 148, 159)" stroke-width="2" stroke-miterlimit="10" fill="rgb(141, 148, 159)" fill-opacity="0.1" d="M 697,1889 L 746.65,1815.26 M 784.3,1759.33 L 833,1687" />
    <rect id="rectangle187" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="660" y="0" width="210" height="210" />
    <rect id="rectangle188" stroke="none" fill="rgb(255, 203, 87)" fill-opacity="0" x="660" y="151" width="210" height="40" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="695.41" y="155" text-anchor="middle">
        <tspan x="765" y="180">iPhone 4, 4s</tspan>
    </text>
    <g id="originalIPhone2">
        <rect id="rectangle189" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="739" y="47" width="52" height="100" rx="9" />
        <rect id="rectangle190" stroke="none" fill="rgb(141, 148, 159)" x="737" y="55" width="1" height="5" />
        <rect id="rectangle191" stroke="none" fill="rgb(141, 148, 159)" x="737" y="64" width="1" height="6" />
        <rect id="rectangle192" stroke="none" fill="rgb(141, 148, 159)" x="737" y="75" width="1" height="7" />
        <rect id="rectangle193" stroke="none" fill="rgb(141, 148, 159)" x="760" y="54" width="10" height="2" rx="1" />
        <circle id="oval27" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" cx="764.5" cy="138.5" r="4.5" />
        <rect id="rectangle194" stroke="none" fill="rgb(141, 148, 159)" x="774" y="45" width="9" height="1" />
    </g>
    <rect id="rectangle195" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="743" y="63" width="44" height="66" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="12" x="752.9" y="63" text-anchor="middle">
        <tspan x="765" y="100">3.5″</tspan>
    </text>
    <rect id="rectangle196" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="400" y="1640" width="210" height="430" />
    <g id="originalIPhone3">
        <rect id="rectangle197" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="427" y="1641" width="156" height="300" rx="23.33" />
        <rect id="rectangle198" stroke="none" fill="rgb(141, 148, 159)" x="424" y="1669" width="2" height="14" />
        <rect id="rectangle199" stroke="none" fill="rgb(141, 148, 159)" x="424" y="1694" width="2" height="19" />
        <rect id="rectangle200" stroke="none" fill="rgb(141, 148, 159)" x="424" y="1727" width="2" height="20" />
        <rect id="rectangle201" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="490" y="1667" width="29" height="4" rx="2" />
        <circle id="oval28" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" cx="504.5" cy="1915.5" r="13.5" />
        <rect id="rectangle202" stroke="none" fill="rgb(141, 148, 159)" x="531" y="1638" width="27" height="3" />
    </g>
    <rect id="rectangle203" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="400" y="250" width="210" height="400" />
    <path id="rectangle204" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 505,491 L 505,728" />
    <path id="bezier34" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 511.5,722.5 L 505,729 498.5,722.5" />
    <rect id="rectangle205" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="425" y="251" width="160" height="240" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="445.8" y="251" text-anchor="middle">
        <tspan x="505" y="379">320 &#0215; 480</tspan>
    </text>
    <rect id="rectangle206" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="400" y="730" width="210" height="400" />
    <rect id="rectangle207" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="477" y="731" width="54" height="80" />
    <rect id="rectangle208" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="400" y="1220" width="210" height="330" />
    <rect id="rectangle209" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="437" y="1687" width="136" height="202" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="479.79" y="1687" text-anchor="middle">
        <tspan x="505" y="1796">3.5″</tspan>
    </text>
    <path id="rectangle210" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 505,812 L 505,1639" />
    <path id="bezier35" stroke="rgb(65, 153, 231)" stroke-width="2" stroke-miterlimit="10" fill="none" d="M 511.5,1632.5 L 505,1639 498.5,1632.5" />
    <rect id="text19" stroke="rgb(65, 153, 231)" stroke-width="2" fill="rgb(255, 255, 255)" x="435" y="673" width="140" height="30" rx="7" />
    <text fill="rgb(65, 153, 231)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="448.09" y="673" text-anchor="middle">
        <tspan x="505" y="694">render at 1&#0215;</tspan>
    </text>

<text fill="rgb(0, 0, 0)" fill-opacity="0.41" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="542" y="785">
        <tspan x="542" y="802">(pixels)</tspan>
    </text>
    <path id="bezier36" stroke="rgb(141, 148, 159)" stroke-width="2" stroke-miterlimit="10" fill="rgb(141, 148, 159)" fill-opacity="0.1" d="M 436,1890 L 485.65,1816.26 M 523.3,1760.33 L 572,1688" />
    <rect id="rectangle213" stroke="none" fill="rgb(0, 0, 0)" fill-opacity="0" x="400" y="0" width="210" height="210" />
    <rect id="rectangle214" stroke="none" fill="rgb(255, 203, 87)" fill-opacity="0" x="391" y="151" width="230" height="40" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="25" x="392.24" y="155" text-anchor="middle">
        <tspan x="506" y="180">iPhone 2G, 3G, 3GS</tspan>
    </text>
    <g id="originalIPhone4">
        <rect id="rectangle215" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" x="479" y="45" width="52" height="100" rx="9" />
        <rect id="rectangle216" stroke="none" fill="rgb(141, 148, 159)" x="477" y="55" width="1" height="5" />
        <rect id="rectangle217" stroke="none" fill="rgb(141, 148, 159)" x="477" y="64" width="1" height="6" />
        <rect id="rectangle218" stroke="none" fill="rgb(141, 148, 159)" x="477" y="75" width="1" height="7" />
        <rect id="rectangle219" stroke="none" fill="rgb(141, 148, 159)" x="500" y="54" width="10" height="2" rx="1" />
        <circle id="oval29" stroke="rgb(141, 148, 159)" stroke-width="2" fill="none" cx="504.5" cy="136.5" r="4.5" />
        <rect id="rectangle220" stroke="none" fill="rgb(141, 148, 159)" x="514" y="43" width="9" height="1" />
    </g>
    <rect id="rectangle221" stroke="rgb(141, 148, 159)" stroke-width="2" fill="rgb(141, 148, 159)" fill-opacity="0.1" x="483" y="61" width="44" height="66" />
    <text fill="rgb(70, 74, 80)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="12" x="492.9" y="61" text-anchor="middle">
        <tspan x="505" y="98">3.5″</tspan>
    </text>

<text fill="rgb(0, 0, 0)" fill-opacity="0.41" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="1771.62" y="435" text-anchor="middle">
        <tspan x="1806.5" y="456">(points)</tspan>
    </text>

<text fill="rgb(0, 0, 0)" fill-opacity="0.41" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="1511.62" y="435" text-anchor="middle">
        <tspan x="1546.5" y="456">(points)</tspan>
    </text>

<text fill="rgb(0, 0, 0)" fill-opacity="0.41" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="1251.62" y="408" text-anchor="middle">
        <tspan x="1286.5" y="429">(points)</tspan>
    </text>

<text fill="rgb(0, 0, 0)" fill-opacity="0.41" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="991.62" y="408" text-anchor="middle">
        <tspan x="1026.5" y="429">(points)</tspan>
    </text>

<text fill="rgb(0, 0, 0)" fill-opacity="0.41" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="731.62" y="390" text-anchor="middle">
        <tspan x="766.5" y="411">(points)</tspan>
    </text>

<text fill="rgb(0, 0, 0)" fill-opacity="0.41" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="470.62" y="390" text-anchor="middle">
        <tspan x="505.5" y="411">(points)</tspan>
    </text>
    <rect id="text10" stroke="rgb(235, 0, 56)" stroke-width="2" fill="rgb(255, 255, 255)" x="1695" y="1159" width="220" height="30" rx="7" />
    <text fill="rgb(235, 0, 56)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="1704.49" y="1159" text-anchor="middle">
        <tspan x="1805" y="1180">downsampling &#0215; 0.96</tspan>
    </text>
    <rect id="text3" stroke="rgb(235, 0, 56)" stroke-width="2" fill="rgb(255, 255, 255)" x="1955" y="1159" width="220" height="30" rx="7" />
    <text fill="rgb(235, 0, 56)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="1967.35" y="1159" text-anchor="middle">
        <tspan x="2065" y="1180">downsampling / 1.15</tspan>
    </text>

<text fill="rgb(0, 0, 0)" fill-opacity="0.41" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="1771.99" y="917" text-anchor="middle">
        <tspan x="1805" y="938">(pixels)</tspan>
    </text>

<text fill="rgb(0, 0, 0)" fill-opacity="0.41" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="1511.99" y="855" text-anchor="middle">
        <tspan x="1545" y="876">(pixels)</tspan>
    </text>

<text fill="rgb(0, 0, 0)" fill-opacity="0.41" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="991.99" y="837" text-anchor="middle">
        <tspan x="1025" y="858">(pixels)</tspan>
    </text>

<text fill="rgb(0, 0, 0)" fill-opacity="0.41" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="1252.99" y="837" text-anchor="middle">
        <tspan x="1286" y="858">(pixels)</tspan>
    </text>
    <circle id="oval2" stroke="none" fill="rgb(235, 0, 56)" cx="1233" cy="921" r="3" />
    <circle id="oval" stroke="none" fill="rgb(235, 0, 56)" cx="1339" cy="921" r="3" />
    <path id="bezier12" stroke="rgb(235, 0, 56)" stroke-miterlimit="10" stroke-dasharray="4,4" stroke-dashoffset="0" fill="none" d="M 1338.5,923.5 C 1338.5,923.5 1338.5,990.92 1338.5,1039.62 1338.5,1088.33 1349.5,1093.54 1349.5,1131.81 1349.5,1170.08 1349.5,1221.5 1349.5,1221.5"
    />
    <rect id="text5" stroke="rgb(235, 0, 56)" stroke-width="2" fill="rgb(255, 255, 255)" x="1157" y="1159" width="254" height="30" rx="7" />
    <text fill="rgb(235, 0, 56)" font-family="AvenirNext-Medium, 'Avenir Next', sans-serif" font-size="20" x="1173.53" y="1159" text-anchor="middle">
        <tspan x="1284" y="1180">upsampling &#0215; 1.171875</tspan>
    </text>
</svg>

The Ultimate Guide To iPhone Resolutions Source: http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

编辑器支持Emmet

快捷键

The Ultimate Guide To iPhone Resolutions Source: http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

使用CSS Motion Path按指定路径定位元素

分别使用SVG path和CSS3 motion-path实现的粒子漂浮动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：