Last active
December 21, 2015 01:48
-
-
Save zanona/6230045 to your computer and use it in GitHub Desktop.
SVG Pixel Density Test for retina enabled displays. Note how mask and clipPath are raster based instead vector.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <title>Document</title> | |
| <meta charset='utf-8'> | |
| <style> | |
| body { | |
| min-height: 1800px; | |
| background: #EFEFEF; | |
| } | |
| .container { | |
| position: relative; | |
| width: 690px; | |
| height: 200px; | |
| overflow: hidden; | |
| } | |
| .mask.container { | |
| background: url(http://lorempixel.com/690/200/) fixed; | |
| background-size: 100%; | |
| } | |
| .retina svg { | |
| width: 200%; | |
| height: 200%; | |
| -webkit-transform: scale(.5); | |
| -webkit-transform-origin: 0 0; | |
| } | |
| .retina text { font-size: 360px; } | |
| h2 { | |
| position: absolute; | |
| font: bold 14px/22px 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| padding: .2em; | |
| color: white; | |
| background: rgba(0,0,0,.9); | |
| z-index: 1; | |
| } | |
| svg { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| text { | |
| font: bold 180px 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| text-transform: uppercase; | |
| } | |
| </style> | |
| <body> | |
| <div id='fill' class='container'> | |
| <h2>Text Fill Mode (Vector)</h2> | |
| <svg> | |
| <defs> | |
| <pattern id="img1" patternUnits="userSpaceOnUse" width="690" height="200" patternTransform="translate(0,400) scale(1,1)"> | |
| <image xlink:href="http://lorempixum.com/690/200" width="690" height="200"/> | |
| </pattern> | |
| </defs> | |
| <text id='text1' y='200' fill='url(#img1)'>Retina</text> | |
| </svg> | |
| </div> | |
| <div id='path' class='container'> | |
| <h2>Path Mode (Vector)</h2> | |
| <svg viewBox='-12 -50 690 200'> | |
| <path d='M28.68,58.62 L59.64,58.62 C66.1200324,58.62 70.9799838,57.1800144 74.22,54.3 C77.4600162,51.4199856 79.08,46.7400324 79.08,40.26 C79.08,34.0199688 77.4600162,29.4900141 74.22,26.67 C70.9799838,23.8499859 66.1200324,22.44 59.64,22.44 L28.68,22.44 Z M0.42,0.48 L69.72,0.48 C75.4800288,0.48 80.6699769,1.4099907 85.29,3.27 C89.9100231,5.1300093 93.8699835,7.6799838 97.17,10.92 C100.470016,14.1600162 102.989991,17.9099787 104.73,22.17 C106.470009,26.4300213 107.34,31.0199754 107.34,35.94 C107.34,43.5000378 105.750016,50.0399724 102.57,55.56 C99.3899841,61.0800276 94.200036,65.2799856 87,68.16 L87,68.52 C90.4800174,69.4800048 93.3599886,70.9499901 95.64,72.93 C97.9200114,74.9100099 99.7799928,77.2499865 101.22,79.95 C102.660007,82.6500135 103.709997,85.6199838 104.37,88.86 C105.030003,92.1000162 105.479999,95.3399838 105.72,98.58 C105.840001,100.62001 105.959999,103.019986 106.08,105.78 C106.200001,108.540014 106.409999,111.359986 106.71,114.24 C107.010002,117.120014 107.489997,119.849987 108.15,122.43 C108.810003,125.010013 109.799993,127.199991 111.12,129 L82.86,129 C81.2999922,124.91998 80.3400018,120.060028 79.98,114.42 C79.6199982,108.779972 79.0800036,103.380026 78.36,98.22 C77.3999952,91.4999664 75.3600156,86.5800156 72.24,83.46 C69.1199844,80.3399844 64.0200354,78.78 56.94,78.78 L28.68,78.78 L28.68,129 L0.42,129 Z M130.38,0.48 L226.5,0.48 L226.5,24.24 L158.64,24.24 L158.64,51.78 L220.92,51.78 L220.92,73.74 L158.64,73.74 L158.64,105.24 L227.94,105.24 L227.94,129 L130.38,129 Z M236.94,24.24 L236.94,0.48 L342.24,0.48 L342.24,24.24 L303.72,24.24 L303.72,129 L275.46,129 L275.46,24.24 Z M357,0.48 L385.26,0.48 L385.26,129 L357,129 Z M410.1,0.48 L438.18,0.48 L491.82,86.7 L492.18,86.7 L492.18,0.48 L518.64,0.48 L518.64,129 L490.38,129 L436.92,42.96 L436.56,42.96 L436.56,129 L410.1,129 Z M575.88,79.32 L609.18,79.32 L592.98,32.16 L592.62,32.16 Z M578.58,0.48 L607.56,0.48 L655.62,129 L626.28,129 L616.56,100.38 L568.5,100.38 L558.42,129 L529.98,129 Z M578.58,0.48' fill='url(#img1)'/> | |
| </svg> | |
| </div> | |
| <div id='clipPath' class='container'> | |
| <h2>ClipPath Mode 1x(Raster)</h2> | |
| <svg> | |
| <defs> | |
| <clipPath id='myClip'> | |
| <text y='200'>Retina</text> | |
| </clipPath> | |
| </defs> | |
| <rect width='100%' height='100%' fill='url(#img1)' clip-path='url(#myClip)'/> | |
| </svg> | |
| </div> | |
| <div id='clipPath' class='retina container'> | |
| <h2>ClipPath Mode 2x(Raster)</h2> | |
| <svg> | |
| <defs> | |
| <clipPath id='myClip2'> | |
| <text y='400'>Retina</text> | |
| </clipPath> | |
| </defs> | |
| <rect width='100%' height='100%' fill='url(#img1)' clip-path='url(#myClip2)'/> | |
| </svg> | |
| </div> | |
| <div class='mask container'> | |
| <h2>Mask mode 1x (Raster)</h2> | |
| <svg> | |
| <defs> | |
| <mask id="mytext"> | |
| <rect width='100%' height='100%' fill='white'/> | |
| <text y='200'>Retina</text> | |
| </mask> | |
| </defs> | |
| <rect width='100%' height='100%' fill='#EFEFEF' mask="url(#mytext)"/> | |
| </svg> | |
| </div> | |
| <div class='retina mask container'> | |
| <h2>Mask mode 2x (Raster)</h2> | |
| <svg> | |
| <defs> | |
| <mask id="mytext2"> | |
| <rect width='100%' height='100%' fill='white'/> | |
| <text y='400'>Retina</text> | |
| </mask> | |
| </defs> | |
| <rect width='100%' height='100%' fill='#EFEFEF' mask="url(#mytext2)"/> | |
| </svg> | |
| </div> | |
| <!-- | |
| <div id='fill-rule' class='container'> | |
| <h2>Fill-Rule Mode</h2> | |
| <svg viewBox='0 0 1200 400'> | |
| <g fill-rule='evenodd' fill='red'> | |
| <path d="M 250,75 L 323,301 131,161 369,161 177,301 z" /> | |
| <text y='200'>Retina</text> | |
| </g> | |
| </svg> | |
| </div> | |
| --> | |
| <script> | |
| window.addEventListener('scroll', function () { document.getElementById('img1').setAttribute('patternTransform', 'translate(0,' + window.scrollY + ') scale(1,1)') }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi Zanona,
do you know a way to use SVG masking on retina display without pixelated result?
Thanks.