Studio Agenturbüro Studio Agenturbüro

⏏︎ / Archiv / 2015 / Responsive Spritemaps
Responsive Design: Icon-Spritemaps skalieren

Dieser Text liegt momentan nur in englischer Fassung vor.
Responsive Spritemaps

Spritemaps, also das Zusammenfassen verschiedener Visuals in derselben Datei, werden schon lang zur Optimierung der Performance im CSS genutzt.
Deren responsive Darstellung in fluiden Layouts erfordert einige Anpassungen, die im Talk erklärt werden.
    <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="147.6641" y1="31.0767" x2="211.6641" y2="31.0767" gradientTransform="matrix(-0.7071 -0.7071 0.7071 -0.7071 287.0664 181.0137)">
    <stop  offset="0" style="stop-color:#FF0000"/>
    <stop  offset="1" style="stop-color:#FF00FF"/>
</linearGradient>
<circle fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_3_)" cx="182" cy="32" r="32"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="32" y1="64" x2="32" y2="6.394885e-14">
    <stop  offset="0" style="stop-color:#00FF00"/>
    <stop  offset="1" style="stop-color:#00FFFF"/>
</linearGradient>
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_4_)" points="32.638,0 32.637,0.001 32.637,0 31.365,0 
    0,31.363 0,32.637 0,32.637 0,32.637 31.363,64 32.637,64 64,32.637 64,31.363 	"/>
<g>
    <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="0" y1="163.2383" x2="25.6836" y2="163.2383">
        <stop  offset="0" style="stop-color:#00FF00"/>
        <stop  offset="1" style="stop-color:#00FFFF"/>
    </linearGradient>
    <path fill="url(#SVGID_5_)" d="M21.268,152.343c0.108-0.793,0.349-1.382,0.721-1.767c0.373-0.384,0.877-0.577,1.514-0.577
        c0.637,0,1.159,0.225,1.568,0.676s0.613,1.037,0.613,1.757c0,0.697-0.204,1.373-0.613,2.028s-1.003,1.271-1.784,1.847
        c-0.685,0.505-1.421,0.896-2.208,1.172s-1.541,0.415-2.262,0.415c-0.433,0-0.91-0.066-1.433-0.198
        c-0.522-0.132-1.079-0.337-1.667-0.613c-0.409,0.925-0.787,1.767-1.136,2.523s-0.685,1.484-1.009,2.181l-0.216-0.865
        c0.24-0.697,0.49-1.397,0.748-2.1c0.258-0.703,0.525-1.403,0.802-2.1c-3.34-2.066-5.593-3.37-6.759-3.911
        C6.981,152.271,6.044,152,5.335,152c-0.925,0-1.727,0.315-2.406,0.946c-0.679,0.631-1.018,1.373-1.018,2.226
        c0,0.312,0.081,0.643,0.243,0.991s0.399,0.709,0.712,1.082c-0.12,0.457-0.306,0.802-0.559,1.036s-0.559,0.352-0.919,0.352
        c-0.408,0-0.742-0.156-1-0.469S0,157.444,0,156.939c0-0.685,0.18-1.394,0.541-2.126c0.36-0.733,0.877-1.436,1.55-2.109
        c0.685-0.685,1.394-1.208,2.127-1.568c0.733-0.36,1.441-0.541,2.126-0.541c0.673,0,1.4,0.174,2.181,0.523
        c0.781,0.348,1.64,0.889,2.577,1.622l-0.451-1.262c0.385-0.505,0.787-0.877,1.208-1.118c0.421-0.24,0.896-0.36,1.424-0.36
        c0.889,0,1.658,0.37,2.307,1.108c0.649,0.739,0.973,1.637,0.973,2.694c0,0.301-0.033,0.634-0.099,1
        c-0.066,0.367-0.165,0.772-0.297,1.217c0.685,0.324,1.304,0.564,1.856,0.721s1.052,0.234,1.496,0.234
        c0.865,0,1.586-0.222,2.163-0.667c0.577-0.444,0.865-0.997,0.865-1.658c0-0.408-0.096-0.787-0.288-1.135
        C22.067,153.166,21.736,152.775,21.268,152.343z M13.536,162.887c0.577-1.129,1.252-1.977,2.028-2.541
        c0.775-0.565,1.649-0.847,2.622-0.847c1.298,0,2.367,0.441,3.208,1.325c0.841,0.883,1.262,2.016,1.262,3.397
        c0,1.202-0.354,2.265-1.063,3.19s-1.844,1.791-3.407,2.596c-0.252,0.132-0.63,0.324-1.135,0.577
        c-2.199,1.081-3.298,2.084-3.298,3.01c0,0.565,0.21,1.036,0.631,1.415c0.42,0.378,0.938,0.567,1.55,0.567
        c0.817,0,1.481-0.3,1.992-0.901c0.511-0.601,0.82-1.442,0.928-2.523c0.192-0.144,0.382-0.255,0.568-0.333s0.381-0.117,0.586-0.117
        c0.444,0,0.82,0.141,1.126,0.424c0.306,0.282,0.459,0.622,0.459,1.018c0,0.901-0.562,1.682-1.685,2.343
        c-1.124,0.661-2.497,0.991-4.119,0.991c-1.586,0-3.07-0.282-4.452-0.847c-1.382-0.564-2.631-1.394-3.749-2.487
        c-1.105-1.069-1.953-2.295-2.541-3.677c-0.589-1.382-0.883-2.835-0.883-4.362c0-2.006,0.468-3.623,1.406-4.848
        c0.937-1.226,2.169-1.838,3.695-1.838c1.118,0,1.989,0.373,2.613,1.118c0.625,0.745,0.949,1.79,0.973,3.136L13.536,162.887z
         M15.23,155.569c0.06-0.276,0.108-0.532,0.144-0.766s0.054-0.43,0.054-0.586c0-0.841-0.219-1.538-0.658-2.09
        c-0.439-0.553-0.982-0.829-1.631-0.829c-0.36,0-0.655,0.12-0.883,0.36c-0.228,0.24-0.342,0.553-0.342,0.937
        c0,0.505,0.271,1,0.811,1.487C13.266,154.569,14.101,155.064,15.23,155.569z"/>
</g>
<g>
    <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="150" y1="163.2383" x2="175.6836" y2="163.2383">
        <stop  offset="0" style="stop-color:#FF0000"/>
        <stop  offset="1" style="stop-color:#FF00FF"/>
    </linearGradient>
    <path fill="url(#SVGID_6_)" d="M171.268,152.343c0.108-0.793,0.349-1.382,0.721-1.767c0.373-0.384,0.877-0.577,1.514-0.577
        c0.637,0,1.159,0.225,1.568,0.676s0.613,1.037,0.613,1.757c0,0.697-0.204,1.373-0.613,2.028s-1.003,1.271-1.784,1.847
        c-0.685,0.505-1.421,0.896-2.208,1.172s-1.541,0.415-2.262,0.415c-0.433,0-0.91-0.066-1.433-0.198
        c-0.522-0.132-1.079-0.337-1.667-0.613c-0.409,0.925-0.787,1.767-1.136,2.523s-0.685,1.484-1.009,2.181l-0.216-0.865
        c0.24-0.697,0.49-1.397,0.748-2.1c0.258-0.703,0.525-1.403,0.802-2.1c-3.34-2.066-5.593-3.37-6.759-3.911
        c-1.166-0.541-2.103-0.811-2.812-0.811c-0.925,0-1.727,0.315-2.406,0.946c-0.679,0.631-1.018,1.373-1.018,2.226
        c0,0.312,0.081,0.643,0.243,0.991s0.399,0.709,0.712,1.082c-0.12,0.457-0.306,0.802-0.559,1.036s-0.559,0.352-0.919,0.352
        c-0.408,0-0.742-0.156-1-0.469S150,157.444,150,156.939c0-0.685,0.18-1.394,0.541-2.126c0.36-0.733,0.877-1.436,1.55-2.109
        c0.685-0.685,1.394-1.208,2.127-1.568c0.733-0.36,1.441-0.541,2.126-0.541c0.673,0,1.4,0.174,2.181,0.523
        c0.781,0.348,1.64,0.889,2.577,1.622l-0.451-1.262c0.385-0.505,0.787-0.877,1.208-1.118c0.421-0.24,0.896-0.36,1.424-0.36
        c0.889,0,1.658,0.37,2.307,1.108c0.649,0.739,0.973,1.637,0.973,2.694c0,0.301-0.033,0.634-0.099,1
        c-0.066,0.367-0.165,0.772-0.297,1.217c0.685,0.324,1.304,0.564,1.856,0.721s1.052,0.234,1.496,0.234
        c0.865,0,1.586-0.222,2.163-0.667c0.577-0.444,0.865-0.997,0.865-1.658c0-0.408-0.096-0.787-0.288-1.135
        C172.067,153.166,171.736,152.775,171.268,152.343z M163.536,162.887c0.577-1.129,1.252-1.977,2.028-2.541
        c0.775-0.565,1.649-0.847,2.622-0.847c1.298,0,2.367,0.441,3.208,1.325c0.841,0.883,1.262,2.016,1.262,3.397
        c0,1.202-0.354,2.265-1.063,3.19s-1.844,1.791-3.407,2.596c-0.252,0.132-0.63,0.324-1.135,0.577
        c-2.199,1.081-3.298,2.084-3.298,3.01c0,0.565,0.21,1.036,0.631,1.415c0.42,0.378,0.938,0.567,1.55,0.567
        c0.817,0,1.481-0.3,1.992-0.901c0.511-0.601,0.82-1.442,0.928-2.523c0.192-0.144,0.382-0.255,0.568-0.333s0.381-0.117,0.586-0.117
        c0.444,0,0.82,0.141,1.126,0.424c0.306,0.282,0.459,0.622,0.459,1.018c0,0.901-0.562,1.682-1.685,2.343
        c-1.124,0.661-2.497,0.991-4.119,0.991c-1.586,0-3.07-0.282-4.452-0.847c-1.382-0.564-2.631-1.394-3.749-2.487
        c-1.105-1.069-1.953-2.295-2.541-3.677c-0.589-1.382-0.883-2.835-0.883-4.362c0-2.006,0.468-3.623,1.406-4.848
        c0.937-1.226,2.169-1.838,3.695-1.838c1.118,0,1.989,0.373,2.613,1.118c0.625,0.745,0.949,1.79,0.973,3.136L163.536,162.887z
         M165.23,155.569c0.06-0.276,0.108-0.532,0.144-0.766s0.054-0.43,0.054-0.586c0-0.841-0.219-1.538-0.658-2.09
        c-0.439-0.553-0.982-0.829-1.631-0.829c-0.36,0-0.655,0.12-0.883,0.36c-0.228,0.24-0.342,0.553-0.342,0.937
        c0,0.505,0.271,1,0.811,1.487C163.266,154.569,164.101,155.064,165.23,155.569z"/>
</g>