html - 使图像在容器内垂直缩放

Question

我有一个正在使用的布局，它有一个图像 slider ，其中红色图像位于 iPhone 中。现在我卡住了，因为我没有尝试过任何方法，例如 max-width: 100%; height: auto;，有帮助。在下面的 GIF 和源代码中可以看到该问题。此问题在 iPhone 5 和 4 等移动设备上也仍然存在。

有没有一种方法可以使用 SVG 设置内部容器，使图像具有手机内部的最大宽度，并允许以与 SVG 相同的方式缩放？

Source

*,
:after,
:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main,
section {
  display: block;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:active,
a:hover {
  outline-width: 0;
}

h1 {
  font-size: 2em;
  margin: .67em 0;
}

img {
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

.btn::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

.btn:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

img {
  width: 100%;
}

svg {
  max-height: 100%;
  max-width: 100%;
}

@media screen and (max-width:800px) {
  .hide-on-medium {
    display: none!important;
  }
}

.p1 {
  padding: 1rem;
}

.pt1 {
  padding-top: 1rem;
}

.pb1 {
  padding-bottom: 1rem;
}

.plr1 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.mt2 {
  margin-top: 2rem;
}

.mb0 {
  margin-bottom: 0!important;
}

.mb1 {
  margin-bottom: 1rem;
}

.column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  height: auto;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

@media screen and (max-width:480px) {
  .column {
    min-width: 100%;
  }
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  height: auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

@media screen and (max-width:480px) {
  .row>.column {
    width: 100%!important;
  }
}

.w50 {
  width: 50%;
}

.w75 {
  width: 75%;
}

.w90 {
  width: 90%;
}

.w100 {
  width: 100%;
}

.vh100 {
  height: 100vh;
}

.h75 {
  height: 75%;
}

.bg-white {
  background-color: #fff;
}

.absolute {
  position: absolute;
}

.center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.space-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.depth-1 {
  z-index: 100;
}

.depth-2 {
  z-index: 200;
}

@font-face {
  font-family: Office Code Pro;
  src: url(../fonts/OfficeCodePro-Regular.woff);
}

::-moz-selection {
  background: #1e1e1e;
  color: #fff84d;
}

::selection {
  background: #1e1e1e;
  color: #fff84d;
}

h1,
h3,
h4 {
  font-weight: 400;
  margin-bottom: 1rem;
}

h1 {
  font-size: 2.25rem;
  line-height: 1.2;
}

h3 {
  font-size: 1.5rem;
  line-height: 1.4;
}

h4 {
  font-size: 1.25rem;
  line-height: 1.5;
}

body {
  font-size: 1rem;
}

body {
  background-color: #fff;
  color: #1e1e1e;
  font-family: Open Sans,Helvetica,sans-serif;
  line-height: 1.6;
}

a {
  text-decoration: none;
  -webkit-transition: color .2s;
  transition: color .2s;
  cursor: pointer;
}

a,
a:hover {
  color: #fff84d;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

ul {
  list-style-type: disc;
}

input[type=color]::-webkit-color-swatch {
  border: none!important;
}

input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0!important;
}

::-webkit-calendar-picker-indicator,
::-webkit-calendar-picker-indicator:hover {
  background: transparent;
  color: #fff84d;
  padding: 0;
  padding-left: 1rem;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

body {
  color: #1e1e1e;
}

p.lead {
  font-size: 1.2rem;
  font-weight: 600;
}

@media screen and (max-width:800px) {
  p.lead {
    padding-top: 2rem;
    font-size: 1.4rem;
  }
}

.phone {
  background: #1e1e1e;
  position: fixed;
  right: 0;
}

@media screen and (max-width:800px) {
  .phone {
    position: static;
    width: 100%;
    height: 100vh;
  }
}

.info {
  position: absolute;
  left: 0;
}

@media screen and (max-width:800px) {
  .info {
    position: static;
    width: 100%;
  }
}

.phoneContainer {
  position: relative;
  height: 80vh;
  max-height: 500px;
}

.slider ul>li img {
  margin-top: 70px;
  max-width: 100%;
  height: auto;
}

.action {
  max-height: 80px;
}

.quote {
  background: #fff84d;
  position: relative;
}

.quote>a {
  color: #222;
  font-size: 1.75rem;
}

h1.highlight {
  display: inline-block;
  position: relative;
  z-index: 1;
}

h1.highlight:before {
  display: block;
  position: absolute;
  top: 26%;
  width: 110%;
  height: 45%;
  margin-left: -15px;
  background: rgba(255,248,77,.8);
  content: "";
  z-index: -1;
}

h3.highlight {
  display: inline-block;
  position: relative;
  z-index: 1;
}

h3.highlight:before {
  display: block;
  position: absolute;
  top: 60%;
  width: 100%;
  height: 45%;
  margin-left: -1px;
  background: rgba(255,248,77,.5);
  content: "";
  z-index: -1;
}

h3.highlight:before:hover {
  background: #fff84d;
}

ul.offer {
  margin-bottom: 1rem;
}

ul.offer li {
  list-style: none;
}

ul.offer li>h4 {
  display: inline-block;
  padding: 8px 12px;
}

ul.offer li>svg {
  display: inline-block;
  vertical-align: middle;
}

.arrow {
  position: fixed;
  margin: auto;
  bottom: 40px;
  left: 0;
  right: 0;
  width: 24px;
  height: 14px;
  font-size: 40px;
  line-height: 40px;
  -webkit-animation: q 2s infinite ease-in-out;
  animation: q 2s infinite ease-in-out;
}

.arrow svg g {
  stroke: #fff84d;
}

@-webkit-keyframes q {
  0%, 20%, 60%, to {
    -webkit-transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-20px);
  }

  80% {
    -webkit-transform: translateY(-10px);
  }
}

@keyframes q {
  0%, 20%, 60%, to {
    -webkit-transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-20px);
  }

  80% {
    -webkit-transform: translateY(-10px);
  }
}

.logoContainer.for-mobile {
  display: none;
}

@media screen and (max-width:800px) {
  .logoContainer.for-mobile {
    display: block;
    width: 80%;
    max-width: 300px;
    margin: 2rem auto 0;
  }
}

@media screen and (max-width:480px) {
  .logoContainer.for-mobile {
    width: 80%;
    display: block;
    max-width: 300px;
    margin: 2rem auto 0;
  }
}

.phonePosition {
  width: 100%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media screen and (max-width:800px) {
  .phonePosition {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -ms-grid-row-align: start;
    align-items: start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
  }
}

@media screen and (max-width:480px) {
  .phonePosition {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -ms-grid-row-align: start;
    align-items: start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
  }
}

svg.logo {
  width: 300px;
}

@media screen and (max-width:800px) {
  svg.logo path {
    fill: #fff84d!important;
  }
}

.imageContainer {
  width: 200px;
  margin: 0 auto;
}

.imageContainer img {
  width: 100%;
}

svg.logo path {
  fill: #1e1e1e;
}

<main class="row space-between">
  <section class="phone column w50 vh100">
    <div class="logoContainer for-mobile"></div>
    <div class="column w75 pt1 pb1 phonePosition">
      <div class="w100 center middle">
        <div class="phoneContainer center depth-1"><svg class="absolute depth-1 p1" preserveAspectRatio="xMidYMidmeet" width="100%" viewbox="0 0 497 1014" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Apple iPhone 6</title><defs></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path id="Apple-iPhone-6" d="M494,290 L495.501424,290 C496.329065,290 497,289.328711 497,288.501847 L497,216.498153 C497,215.670746 496.33497,215 495.501424,215 L494,215 L494,74.9994014 C494,33.5783758 460.420697,0 418.993513,0 L78.0064869,0 C36.5815481,0 3,33.5749963 3,74.9994014 L3,128 L1.49857602,128 C0.670935336,128 0,128.677424 0,129.507836 L0,167.492164 C0,168.324919 0.665029764,169 1.49857602,169 L3,169 L3,215 L1.49857602,215 C0.670935336,215 0,215.671289 0,216.498153 L0,288.501847 C0,289.329254 0.665029764,290 1.49857602,290 L3,290 L3,307 L1.49857602,307 C0.670935336,307 0,307.671289 0,308.498153 L0,380.501847 C0,381.329254 0.665029764,382 1.49857602,382 L3,382 L3,939.000599 C3,980.421624 36.5793027,1014 78.0064869,1014 L418.993513,1014 C460.418452,1014 494,980.425004 494,939.000599 L494,290 Z M33,123 L33,889 L464,889 L464,123 L33,123 Z M248,983 C268.98682,983 286,965.98682 286,945 C286,924.01318 268.98682,907 248,907 C227.01318,907 210,924.01318 210,945 C210,965.98682 227.01318,983 248,983 Z M248,979 C266.777681,979 282,963.777681 282,945 C282,926.222319 266.777681,911 248,911 C229.222319,911 214,926.222319 214,945 C214,963.777681 229.222319,979 248,979 Z M170,72 C174.418278,72 178,68.418278 178,64 C178,59.581722 174.418278,56 170,56 C165.581722,56 162,59.581722 162,64 C162,68.418278 165.581722,72 170,72 Z M249,37 C251.761424,37 254,34.7614237 254,32 C254,29.2385763 251.761424,27 249,27 C246.238576,27 244,29.2385763 244,32 C244,34.7614237 246.238576,37 249,37 Z M212.994583,60 C210.788436,60 209,61.7953562 209,64 C209,66.209139 210.78308,68 212.994583,68 L285.005417,68 C287.211564,68 289,66.2046438 289,64 C289,61.790861 287.21692,60 285.005417,60 L212.994583,60 Z" fill="#FFFFFF"></path></g></svg>
          <div
               class="imageContainer center">
            <div class="slider">
              <ul>
                <li><img src="http://i.imgur.com/0uis27M.jpg"></li>

              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="arrow depth-1"><svg width="24px" height="14px" viewbox="0 0 12 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Path 3088</title><defs></defs><g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g id="Music-4" transform="translate(-130.000000, -950.000000)" stroke-width="1.5" stroke="#333122"><polyline id="Path-3088" points="131.25 951.574381 135.960658 956 140.75 951.5"></polyline></g></g></svg></div>
    <div class="action row space-between w100 hide-on-medium">
      <div class="quote column w50 center"><a class="center" href="#" target="_blank">Block Text</a></div>
    </div>
  </section>
  <section class="info column w50 vh100 center bg-white depth-2">
    <div class="column w90 h75 plr1 pb1 center">
      <div class="vh100 top-center" style="border: 1px solid blue;">
      </div>
    </div>
  </section>
</main>

编辑:演示中使用的图像是一个占位符。真正的 JPG 将用于最终元素。

Answer 1

编织: http://kodeweave.sourceforge.net/editor/#c2c35129a4f28e54e7a77f6b54851170

首先是图片不是手机 svg 元素的容器。

在 SVG 中有一个图像元素，您可以在其中嵌入图像，或者您可以使用 Inkscape 将图像转换为 svg，然后将它们合并在一起，这就是我在下面所做的。

<svg class="absolute depth-1 p1" preserveAspectRatio="xMidYMidmeet" width="100%" viewbox="0 0 497 1014" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Apple iPhone 6</title>
  <g
     id="g4846">
    <path
       id="path4862"
       d="m 33.476753,505.82102 0,-383.41699 215.429797,0 215.42979,0 0,383.41699 0,383.41699 -215.42979,0 -215.429797,0 0,-383.41699 z"
       style="fill:#fc0000" />
    <path
       id="path4860"
       d="m 295.27566,536.58508 c -7.46812,-3.73606 -12.29704,-9.41914 -15.62185,-18.38508 -2.99872,-8.08661 -2.74024,-26.63957 0.48625,-34.90163 5.19819,-13.311 16.25675,-21.13524 31.08664,-21.9947 10.44186,-0.60515 16.98484,0.96186 24.01269,5.75092 5.08311,3.46384 11.00951,10.33667 11.00951,12.76769 0,0.57501 -3.17831,2.61452 -7.06291,4.53227 l -7.06291,3.48679 -3.05086,-3.70538 c -6.69634,-8.13296 -18.75489,-9.10373 -26.46469,-2.13055 -5.12867,4.63865 -6.79047,9.42676 -6.67927,19.2448 0.16314,14.40516 6.61626,22.14586 18.40041,22.07177 6.99656,-0.044 12.10401,-2.47002 14.34868,-6.81563 3.02314,-5.85268 2.45603,-6.42514 -6.36509,-6.42514 l -7.97889,0 0,-6.92281 0,-6.9228 16.48969,0 16.48969,0 0,21.30094 0,21.30094 -7.44696,0 -7.44695,0 0,-3.26766 0,-3.26767 -3.12126,2.22503 c -5.06675,3.61191 -11.53461,5.37535 -19.71536,5.37535 -6.46237,0 -8.72311,-0.52423 -14.30656,-3.31745 z m -209.670216,-35.55677 0,-37.80918 9.042732,0 9.042734,0 0,37.80918 0,37.80917 -9.042734,0 -9.042732,0 0,-37.80917 z m 32.872996,37.27665 c -0.0585,-0.29289 -0.10639,-1.7307 -0.10639,-3.19514 0,-1.46444 0.0479,-18.23894 0.10639,-37.27665 l 0.10638,-34.61404 13.18967,0 13.18967,0 6.60958,27.42497 c 3.63526,15.08373 6.92422,27.76918 7.3088,28.18987 0.3846,0.4207 3.77025,-11.92053 7.52369,-27.42497 l 6.82445,-28.18987 13.63532,0 13.63533,0 0,37.80918 0,37.80917 -9.15567,0 -9.15567,0 0.62099,-9.31916 c 0.34154,-5.12554 0.85618,-19.86313 1.14363,-32.7502 l 0.52265,-23.43104 -8.27184,32.48394 -8.27185,32.48394 -8.66424,0.30849 -8.66426,0.30848 -1.04325,-4.03614 c -0.57379,-2.21989 -4.19775,-16.49721 -8.05325,-31.72739 -3.85549,-15.23017 -7.22513,-28.1705 -7.48809,-28.75627 -0.51964,-1.15759 0.1869,30.41298 1.15007,51.38852 l 0.59909,13.04683 -8.59241,0 c -4.72583,0 -8.64028,-0.23963 -8.69879,-0.53252 z m 87.96645,-6.65655 c 1.44281,-3.95398 7.56089,-20.84829 13.59574,-37.54291 l 10.97243,-30.35384 10.0106,-0.29509 10.01059,-0.29508 13.29814,36.84956 c 7.31397,20.26726 13.45771,37.29435 13.65274,37.83799 0.20206,0.56319 -3.96902,0.98844 -9.69499,0.98844 l -10.0496,0 -1.85016,-5.88876 -1.85017,-5.88877 -13.33902,0.29727 -13.33903,0.29727 -2.12052,5.5915 -2.12053,5.59149 -9.89976,0 -9.89976,0 2.6233,-7.18907 z m 42.9706,-19.70337 c -0.048,-2.77873 -8.12429,-26.74269 -8.6871,-25.77622 -0.473,0.81226 -5.23312,15.99476 -7.91455,25.2437 -0.48294,1.66576 0.37172,1.86383 8.04213,1.86383 6.16902,0 8.57605,-0.37437 8.55952,-1.33131 z m 109.40432,23.96356 c -0.18514,-1.61088 -0.20429,-18.62501 -0.0426,-37.80917 l 0.29408,-34.8803 27.00559,0 27.0056,0 0.36045,6.48247 c 0.19825,3.56535 0.16099,6.68061 -0.0829,6.9228 -0.24379,0.24219 -8.50193,0.44035 -18.35143,0.44035 l -17.9081,0 0,7.45533 0,7.45533 16.48969,0 16.48969,0 0,6.9228 0,6.92281 -16.48969,0 -16.48969,0 0,9.58542 0,9.58543 20.21317,0 20.21317,0 0,6.92281 0,6.9228 -29.18524,0 -29.18524,0 -0.33662,-2.92888 z"
       style="fill:#d00000" />
    <path
       id="path4858"
       d="M 300.49643,538.96906 C 283.8917,533.52858 274.5362,514.3852 278.05253,493.044 c 3.35536,-20.36433 16.57065,-31.95496 36.43403,-31.95496 10.56629,0 18.03633,3.1289 25.63736,10.73847 3.36873,3.37253 6.12498,6.78626 6.12498,7.58606 0,0.7998 -3.11542,2.99219 -6.92316,4.87198 l -6.92315,3.4178 -3.82999,-4.2441 c -8.66653,-9.60361 -24.48446,-7.82526 -30.37902,3.4154 -3.43795,6.55599 -3.43795,20.68627 0,27.24227 6.88593,13.13116 28.22281,12.68508 32.04871,-0.67002 l 0.96417,-3.36569 -8.43655,0 -8.43654,0 0,-6.92281 0,-6.9228 16.48969,0 16.48969,0 0,21.3496 0,21.34961 -7.18099,-0.31493 -7.181,-0.31492 -0.53192,-3.6345 c -0.48691,-3.32695 -0.66093,-3.47808 -2.05653,-1.78598 -3.25726,3.94924 -9.90364,6.31052 -18.68856,6.63952 -4.68095,0.1753 -9.71074,-0.0744 -11.17732,-0.55494 z m -214.890986,-37.94075 0,-37.80918 9.042732,0 9.042734,0 0,37.80918 0,37.80917 -9.042734,0 -9.042732,0 0,-37.80917 z m 32.979376,0 0,-37.80918 13.07519,0 13.0752,0 6.7322,27.95749 c 3.70271,15.37662 7.0042,28.41598 7.33663,28.97637 0.33243,0.56038 3.75481,-11.90067 7.60528,-27.69123 l 7.00086,-28.7101 13.01365,-0.29905 13.01365,-0.29904 0,37.84196 0,37.84195 -8.59534,0 -8.59533,0 0.55657,-2.92888 c 0.30611,-1.61088 0.80787,-16.58811 1.11502,-33.28272 l 0.55846,-30.35385 -7.75651,30.35385 c -4.26607,16.69461 -8.09004,31.67184 -8.49771,33.28272 -0.72945,2.88235 -0.87345,2.92888 -9.06486,2.92888 l -8.32364,0 -8.27868,-32.7502 c -4.55327,-18.01261 -8.50595,-32.98984 -8.78374,-33.28272 -0.60257,-0.63532 0.56231,47.26176 1.41817,58.31133 l 0.59808,7.72159 -8.60158,0 -8.60157,0 0,-37.80917 z m 98.60905,1.33131 c 7.24284,-20.06283 13.38354,-37.09505 13.64599,-37.84938 0.35358,-1.01626 3.02588,-1.29213 10.31664,-1.06505 l 9.83944,0.30647 9.80383,27.1587 c 5.39212,14.93729 11.47885,31.8316 13.52608,37.54291 l 3.72224,10.38421 -9.85512,0 -9.85513,0 -1.84442,-5.85776 -1.84442,-5.85776 -13.58142,0 -13.58141,0 -1.84442,5.85776 -1.84442,5.85776 -9.88613,0 -9.88614,0 13.16881,-36.47786 z m 30.40756,2.13009 c -1.5007,-4.83265 -3.55438,-11.42263 -4.56373,-14.6444 -1.10758,-3.53528 -2.07816,-5.22435 -2.44803,-4.26019 -1.26715,3.30319 -8.17281,25.94975 -8.17281,26.80208 0,0.48903 4.03045,0.88915 8.95656,0.88915 l 8.95655,0 -2.72854,-8.78664 z m 111.41368,-3.4614 0,-37.80918 27.1282,0 27.12819,0 0,6.92281 0,6.92281 -18.08546,0 -18.08547,0 0,7.45533 0,7.45533 16.48969,0 16.48969,0 0,6.9228 0,6.92281 -16.48969,0 -16.48969,0 0,9.58542 0,9.58543 19.68124,0 19.68125,0 0,6.92281 0,6.9228 -28.72398,0 -28.72397,0 0,-37.80917 z"
       style="fill:#ac0000" />
    <path
       id="path4856"
       d="m 300.31241,538.48445 c -8.31754,-2.35516 -15.82356,-9.33533 -19.49299,-18.12738 -2.4976,-5.98431 -3.65143,-17.76118 -2.57837,-26.31671 1.79036,-14.27445 7.73938,-23.4481 18.71326,-28.85659 6.16852,-3.04017 8.02621,-3.44226 16.16373,-3.49858 6.26147,-0.0433 10.9488,0.54923 14.69488,1.85768 6.03099,2.10655 14.43539,8.86626 16.86034,13.56086 l 1.54456,2.99022 -6.978,3.90671 c -6.65615,3.72653 -7.04641,3.81631 -8.46143,1.9468 -0.81589,-1.07795 -1.49866,-2.29916 -1.51727,-2.7138 -0.0186,-0.41463 -2.20643,-2.02854 -4.86183,-3.58646 -9.48212,-5.56315 -21.97442,-1.97907 -26.51882,7.60831 -4.17014,8.79781 -3.07709,23.04662 2.31116,30.12778 8.19824,10.77402 26.95946,7.76778 30.61545,-4.90573 0.67626,-2.34427 0.50475,-2.39635 -7.89121,-2.39635 l -8.5825,0 0,-6.92281 0,-6.9228 16.48969,0 16.48969,0 0,21.30094 0,21.30094 -6.86683,0 -6.86681,0 -0.71037,-3.79083 -0.71036,-3.79083 -2.27795,2.14242 c -5.65644,5.31993 -20.01795,7.79036 -29.56802,5.08621 z m -214.706966,-37.45614 0,-37.80918 9.042732,0 9.042734,0 0,37.80918 0,37.80917 -9.042734,0 -9.042732,0 0,-37.80917 z m 32.979376,-0.0328 0,-37.84195 12.96754,0.29904 12.96755,0.29904 6.74463,27.15871 c 3.70954,14.93728 7.04241,27.87761 7.40637,28.75627 0.36396,0.87867 3.85546,-11.34275 7.75889,-27.1587 l 7.09716,-28.75628 12.95527,-0.29904 12.95525,-0.29904 0,37.84195 0,37.84196 -8.10033,0 -8.10034,0 0.71102,-30.62011 c 0.39106,-16.84105 0.97488,-32.05792 1.29738,-33.81524 0.37385,-2.03711 0.22014,-2.80913 -0.42411,-2.1301 -0.55576,0.58578 -4.75007,15.80264 -9.32069,33.81525 l -8.31021,32.7502 -8.21544,0 -8.21545,0 -8.60817,-33.81525 -8.60817,-33.81525 0.63072,33.81525 0.63072,33.81525 -8.10979,0 -8.1098,2e-5 0,-37.84195 z m 86.17192,37.16148 c 0,-0.37426 6.04839,-17.40552 13.44088,-37.84725 l 13.44088,-37.16677 9.5917,0.30434 9.59172,0.30433 6.12547,17.04076 c 3.36901,9.37241 9.46719,26.284 13.5515,37.58131 l 7.42603,20.54055 -9.63263,-0.30466 -9.63262,-0.30465 -1.77529,-5.32524 -1.77531,-5.32523 -13.94177,-0.29674 -13.94179,-0.29672 -1.854,5.88822 -1.85402,5.88823 -9.38037,0 c -5.15921,2e-5 -9.38038,-0.30619 -9.38038,-0.68046 z m 45.30958,-26.61202 c -0.365,-0.95226 -2.42164,-7.4277 -4.5703,-14.38985 -2.14866,-6.96216 -4.24512,-12.29375 -4.6588,-11.84797 -0.85733,0.92385 -8.42036,24.98329 -8.42036,26.78677 0,0.77496 3.15541,1.18244 9.15655,1.18244 8.01659,0 9.07393,-0.21555 8.49291,-1.73137 z m 108.94879,-10.51665 0,-37.80918 27.1282,0 27.12819,0 0,6.92281 0,6.92281 -18.08546,0 -18.08547,0 0,7.45533 0,7.45533 16.48969,0 16.48969,0 0,6.9228 0,6.92281 -16.48969,0 -16.48969,0 0,9.58542 0,9.58543 19.68124,0 19.68125,0 0,6.92281 0,6.9228 -28.72398,0 -28.72397,0 0,-37.80917 z"
       style="fill:#900000" />
    <path
       id="path4854"
       d="m 302.34853,538.74371 c -16.9246,-3.99188 -24.97342,-17.54827 -23.92506,-40.29625 0.61774,-13.40393 2.65246,-18.89912 9.85039,-26.60293 6.98178,-7.47248 13.50605,-10.06084 25.52759,-10.12747 8.3536,-0.0463 10.42422,0.33702 16.23628,3.00568 6.27071,2.87926 12.41505,8.29603 15.09334,13.30608 1.08708,2.03352 0.61694,2.49823 -5.66516,5.59956 l -6.85062,3.38199 -3.64162,-3.86558 c -4.32933,-4.59558 -7.79917,-6.08004 -14.2118,-6.08004 -12.27058,0 -19.58633,8.70877 -19.57187,23.29868 0.0151,15.25793 7.03816,23.56948 19.90709,23.55941 6.07786,-0.004 11.11846,-2.75323 14.13594,-7.70788 3.45157,-5.66738 3.00624,-6.13375 -5.85692,-6.13375 l -7.97888,0 0,-6.92281 0,-6.9228 15.42583,0 15.42584,0 0,21.30094 0,21.30094 -6.38311,0 c -5.58315,0 -6.3831,-0.25603 -6.3831,-2.04298 0,-5.02285 -1.03547,-5.44629 -5.46419,-2.23453 -6.50209,4.71539 -16.50432,6.34557 -25.66997,4.18374 z m -216.743086,-37.7154 0,-37.80918 9.042732,0 9.042734,0 0,37.80918 0,37.80917 -9.042734,0 -9.042732,0 0,-37.80917 z m 32.979376,-0.0328 0,-37.84195 12.97586,0.29904 12.97587,0.29904 6.71327,27.69123 c 3.69229,15.23018 7.00658,28.41014 7.36508,29.2888 0.45038,1.10386 13.29191,-47.13656 15.23889,-57.24629 0.0282,-0.14642 5.79607,-0.26624 12.81748,-0.26624 l 12.76621,0 0,37.80918 0,37.80917 -8.09848,0 -8.09847,0 0.68055,-26.35992 c 0.37431,-14.49795 0.95545,-29.59499 1.29142,-33.54898 0.33598,-3.95399 0.19554,-7.18907 -0.3121,-7.18907 -0.50763,0 -4.68066,15.09704 -9.2734,33.54899 l -8.35043,33.54898 -8.12215,-0.003 -8.12215,-0.003 -8.44993,-33.54562 c -4.64747,-18.45043 -8.86864,-33.54596 -9.38039,-33.54596 -0.51175,0 -0.69584,0.83872 -0.40909,1.86383 0.28675,1.02511 0.84815,16.12215 1.24756,33.54899 l 0.7262,31.68515 -8.0909,0 -8.0909,0 0,-37.84195 z m 86.41334,36.51067 c 0.25798,-0.73222 6.36897,-17.74634 13.57997,-37.80917 l 13.11092,-36.47787 9.29281,0 c 7.85965,0 9.40676,0.28745 10.03156,1.86383 2.8319,7.14485 26.08518,72.10981 26.08518,72.87671 0,0.52841 -4.14885,0.82227 -9.21968,0.65301 l -9.21966,-0.30772 -1.77509,-5.32524 -1.7751,-5.32523 -13.94177,-0.29674 -13.94179,-0.29672 -1.854,5.88822 -1.85402,5.88823 -9.4942,0 c -7.13629,0 -9.3777,-0.33063 -9.02513,-1.33131 z m 45.49367,-24.49608 c -0.10095,-2.5644 -9.54235,-29.62169 -9.94129,-28.49001 -0.30974,0.87866 -2.45365,7.70828 -4.76426,15.17692 l -4.2011,13.57935 9.45857,0 c 5.20221,0 9.45385,-0.11982 9.44808,-0.26626 z m 108.52328,-11.98178 0,-37.80918 27.1282,0 27.12819,0 0,6.92281 0,6.92281 -18.61739,0 -18.61739,0 0,7.45533 0,7.45533 16.48969,0 16.48969,0 0,6.9228 0,6.92281 -16.48969,0 -16.48969,0 0,9.58542 0,9.58543 20.21317,0 20.21317,0 0,6.92281 0,6.9228 -28.72398,0 -28.72397,0 0,-37.80917 z"
       style="fill:#700000" />
    <path
       id="path4852"
       d="m 301.35781,538.47525 c -15.92673,-4.49367 -23.84912,-18.08413 -22.99615,-39.44876 0.5235,-13.11232 3.8523,-21.66895 10.99364,-28.25901 5.7267,-5.28462 9.06458,-6.98508 16.87503,-8.59682 14.70307,-3.0341 31.65237,3.52003 38.20795,14.77464 l 1.91287,3.284 -7.00964,3.4605 -7.00964,3.4605 -2.79384,-3.57389 c -3.41431,-4.36756 -8.24558,-6.51166 -14.67273,-6.51166 -12.58948,0 -19.66938,8.43387 -19.66938,23.43103 0,10.72025 3.67678,18.23551 10.70054,21.87173 3.82359,1.97947 12.98902,2.01395 16.73459,0.0629 3.98659,-2.07654 7.36739,-5.94705 8.22848,-9.42035 l 0.72612,-2.92888 -8.09421,0 -8.09421,0 0,-6.92281 0,-6.9228 15.42583,0 15.42584,0 0,21.30094 0,21.30094 -6.38311,0 c -6.35463,0 -6.3831,-0.014 -6.3831,-3.13228 0,-3.6615 -1.37576,-4.91583 -3.10451,-2.83048 -4.11048,4.95841 -20.2541,8.0739 -29.02037,5.60053 z m -215.752366,-37.44694 0,-37.80918 8.510807,0 8.510809,0 0,37.80918 0,37.80917 -8.510809,0 -8.510807,0 0,-37.80917 z m 32.979376,0 0,-37.80918 12.72521,0 12.7252,0 1.05413,3.99393 c 0.57977,2.19666 3.77677,15.01716 7.10443,28.49001 3.32768,13.47285 6.3669,24.85591 6.75383,25.29571 0.38693,0.43979 3.4633,-10.58344 6.83638,-24.49608 3.37308,-13.91265 6.59866,-27.09298 7.16797,-29.28964 l 1.03511,-3.99393 12.72519,0 12.72521,0 0,37.80918 0,37.80917 -8.10232,0 -8.10233,0 0.6713,-21.5672 c 0.36922,-11.86197 0.95151,-27.31846 1.29399,-34.34777 0.39381,-8.08304 0.25139,-12.38911 -0.3875,-11.71552 -0.55561,0.58577 -4.79253,16.04018 -9.41539,34.34312 l -8.4052,33.27809 -7.99598,0.004 -7.99598,0.004 -8.35044,-33.54899 c -4.59274,-18.45118 -8.81206,-33.54822 -9.37627,-33.54822 -0.61229,0 -0.7871,2.68345 -0.43364,6.65654 0.32571,3.6611 0.89391,18.75815 1.26267,33.54899 l 0.67047,26.89244 -8.09302,0 -8.09302,0 0,-37.80917 z m 86.43065,36.52123 c 0.28579,-0.75607 6.43001,-17.78971 13.65381,-37.85254 l 13.13421,-36.47787 9.23339,0 9.23341,0 4.34975,11.98178 c 19.14118,52.72616 22.47856,62.05512 22.47856,62.8343 0,0.48686 -4.18587,0.74673 -9.30193,0.57747 l -9.30193,-0.30772 -1.49049,-5.5915 -1.49048,-5.5915 -14.07482,0 -14.07482,0 -2.00491,5.5915 -2.00492,5.5915 -9.42922,0.30963 c -7.3562,0.24156 -9.31499,0.007 -8.90961,-1.06505 z m 45.25845,-25.6045 c -0.25083,-0.73222 -2.31614,-7.43861 -4.58956,-14.90309 -2.27342,-7.46449 -4.46229,-13.21574 -4.86414,-12.78056 -0.40185,0.43516 -2.03368,5.10465 -3.62629,10.37663 -1.59259,5.27199 -3.51147,11.62233 -4.26417,14.11188 l -1.36851,4.52645 9.58436,0 c 7.20148,0 9.47097,-0.331 9.12831,-1.33131 z m 108.74119,-10.91673 0,-37.80918 27.1282,0 27.12819,0 0,6.92281 0,6.92281 -18.61739,0 -18.61739,0 0,7.45533 0,7.45533 16.48969,0 16.48969,0 0,6.9228 0,6.92281 -16.48969,0 -16.48969,0 0,9.58542 0,9.58543 20.21317,0 20.21317,0 0,6.92281 0,6.9228 -28.72398,0 -28.72397,0 0,-37.80917 z"
       style="fill:#4a0000" />
    <path
       id="path4850"
       d="m 301.34623,538.40916 c -9.26015,-2.49536 -16.09515,-8.85346 -20.72084,-19.27505 -1.48013,-3.33472 -1.89526,-7.15717 -1.91096,-17.59568 -0.0195,-12.9423 0.0831,-13.54513 3.47655,-20.44609 6.59118,-13.40362 16.79335,-19.44021 32.67432,-19.33327 12.43018,0.0837 21.47582,4.50466 28.09396,13.73062 l 3.39781,4.73669 -6.88187,3.39742 -6.88187,3.39741 -2.96316,-3.52547 c -3.7486,-4.45998 -8.44261,-6.43099 -15.31546,-6.43099 -12.30835,0 -19.13065,8.46549 -19.13065,23.73837 0,6.4486 0.51648,8.83921 2.92559,13.54162 3.58454,6.99678 7.91395,9.58208 16.04635,9.58208 7.0043,0 12.54766,-2.49479 15.19291,-6.83756 3.74194,-6.14326 3.0049,-7.00805 -5.9728,-7.00805 l -7.97888,0 0,-6.92281 0,-6.9228 15.42583,0 15.42584,0 0,21.30094 0,21.30094 -6.38311,0 -6.3831,0 0,-3.72766 c 0,-2.05022 -0.22274,-3.72767 -0.49498,-3.72767 -0.27224,0 -2.71301,1.40822 -5.42392,3.12937 -7.99602,5.07662 -16.91949,6.40323 -26.21756,3.89764 z m -214.676935,-37.38085 0,-37.80918 7.978881,0 7.978884,0 0,37.80918 0,37.80917 -7.978884,0 -7.978881,0 0,-37.80917 z m 31.915525,0 0,-37.80918 12.72521,0 12.7252,0 1.04624,3.99393 c 0.57544,2.19666 3.75945,15.2568 7.0756,29.02254 3.31614,13.76573 6.33825,25.36776 6.7158,25.78227 0.37756,0.41453 3.95016,-12.64561 7.93912,-29.02253 l 7.25264,-29.77621 12.68642,0 12.68643,0 0,37.80918 0,37.80917 -8.10007,0 -8.10008,0 0.66522,-17.30701 c 0.36587,-9.51886 0.95368,-24.85554 1.30624,-34.08151 0.36365,-9.51623 0.23319,-16.7745 -0.3015,-16.7745 -0.51838,0 -4.75578,15.3548 -9.41645,34.12176 l -8.47392,34.12176 -7.90097,-0.30651 -7.90095,-0.30651 -8.54736,-33.81525 c -4.70105,-18.59839 -8.9783,-33.81525 -9.50501,-33.81525 -0.54777,0 -0.69121,5.12829 -0.33514,11.98178 0.34238,6.58998 0.921,21.92666 1.28583,34.08151 l 0.66333,22.09973 -8.09592,0 -8.09591,0 0,-37.80917 z m 86.33492,36.94238 c 0.20291,-0.52399 6.35308,-17.55307 13.66706,-37.84239 l 13.29813,-36.88968 9.3087,-0.01 c 5.11978,-0.005 9.30869,0.16741 9.30869,0.38395 0,0.21653 5.98417,17.00591 13.29814,37.30973 7.31397,20.30382 13.29814,37.14078 13.29814,37.41548 0,0.2747 -4.04477,0.49944 -8.98837,0.49944 l -8.98837,0 -1.85348,-5.88649 -1.85346,-5.88649 -14.33425,0.29499 -14.33424,0.295 -1.77517,5.32523 -1.77519,5.32524 -9.32263,0.30922 c -5.18519,0.172 -9.15889,-0.11358 -8.9537,-0.64349 z m 45.58258,-25.3378 c 0,-2.45204 -9.05948,-29.04577 -9.6737,-28.39673 -0.42494,0.44904 -2.55392,6.56769 -4.73106,13.59701 -2.17715,7.02931 -4.18654,13.37965 -4.46531,14.11187 -0.38254,1.00473 1.86972,1.33131 9.1816,1.33131 5.32866,0 9.68847,-0.28955 9.68847,-0.64346 z m 108.51279,-11.60458 0,-37.80918 27.1282,0 27.12819,0 0,6.92281 0,6.92281 -18.61739,0 -18.61739,0 0,7.45533 0,7.45533 16.48969,0 16.48969,0 0,6.9228 0,6.92281 -16.48969,0 -16.48969,0 0,9.58542 0,9.58543 20.21317,0 20.21317,0 0,6.92281 0,6.9228 -28.72398,0 -28.72397,0 0,-37.80917 z"
       style="fill:#270000" />
    <path
       id="path4848"
       d="m 302.33048,538.73995 c -15.87056,-3.74128 -25.05815,-19.0351 -23.89633,-39.77823 1.20017,-21.42746 11.00535,-33.71038 29.51605,-36.97465 7.93733,-1.3997 17.55124,0.16395 23.99791,3.90312 5.09399,2.9546 13.55596,11.81399 12.96869,13.57778 -0.22556,0.67745 -3.06946,2.67923 -6.31975,4.44844 l -5.90965,3.21672 -2.92063,-3.47488 c -4.1223,-4.90458 -8.01031,-6.59616 -15.1146,-6.57598 -7.88517,0.0224 -13.63498,3.13058 -16.71443,9.03538 -1.82449,3.49845 -2.22176,6.17875 -2.22176,14.99018 0,9.8357 0.23594,11.08677 2.83066,15.01048 3.49377,5.28321 8.57628,7.80851 15.71572,7.80851 7.18542,0 12.29659,-2.25571 14.93766,-6.59245 3.9013,-6.40611 3.22117,-7.25316 -5.82391,-7.25316 l -7.97888,0 0,-6.92281 0,-6.9228 15.42583,0 15.42584,0 0,21.30094 0,21.30094 -6.38311,0 -6.3831,0 0,-4.18817 0,-4.18816 -5.28389,3.5598 c -7.72445,5.20402 -16.79313,6.85836 -25.86832,4.719 z m -215.661185,-37.71164 0,-37.80918 7.978881,0 7.978884,0 0,37.80918 0,37.80917 -7.978884,0 -7.978881,0 0,-37.80917 z m 31.915525,0 0,-37.80918 12.63756,0 12.63757,0 7.18951,29.02254 c 3.95424,15.96239 7.51061,29.38572 7.90304,29.82961 0.39244,0.44389 3.97441,-12.61626 7.95995,-29.02254 l 7.24643,-29.82961 12.6393,0 12.6393,0 0,37.80918 0,37.80917 -8.09933,0 -8.09934,0 0.63952,-15.70944 c 1.67675,-41.18948 1.90289,-52.45339 1.05305,-52.45109 -0.50585,0.001 -4.79163,15.21824 -9.52395,33.81525 l -8.60422,33.81276 -7.82246,0 -7.82248,0 -8.43732,-33.81525 c -4.64053,-18.59839 -8.90502,-33.81525 -9.47665,-33.81525 -0.65149,0 -0.80907,4.471 -0.42229,11.98178 0.33935,6.58998 0.9114,21.92666 1.27121,34.08151 l 0.6542,22.09973 -8.0813,0 -8.0813,0 0,-37.80917 z m 89.94863,27.46622 c 2.06198,-5.73401 8.16327,-22.64688 13.55844,-37.58417 l 9.8094,-27.1587 9.06632,-0.30431 9.06632,-0.3043 13.16436,36.51591 c 7.24039,20.08375 13.38116,37.11499 13.64614,37.84721 0.36151,0.9989 -1.79091,1.33131 -8.62038,1.33131 l -9.10219,0 -1.85348,-5.88649 -1.85346,-5.88649 -14.33425,0.29499 -14.33424,0.295 -1.77517,5.32523 -1.77519,5.32524 -9.20583,0.30752 -9.20583,0.30753 3.74904,-10.42548 z m 41.96887,-16.04625 c 0,-1.25039 -8.50126,-28.27367 -9.07546,-28.84851 -0.83308,-0.83402 -1.12057,-0.0872 -5.27445,13.70087 -2.20591,7.3222 -4.23942,13.91218 -4.51891,14.6444 -0.38351,1.00483 1.8678,1.33131 9.18035,1.33131 5.32866,0 9.68847,-0.37264 9.68847,-0.82807 z m 108.51279,-11.41997 0,-37.80918 27.1282,0 27.12819,0 0,6.92281 0,6.92281 -18.61739,0 -18.61739,0 0,7.45533 0,7.45533 16.48969,0 16.48969,0 0,6.9228 0,6.92281 -16.48969,0 -16.48969,0 0,9.58542 0,9.58543 20.21317,0 20.21317,0 0,6.92281 0,6.9228 -28.72398,0 -28.72397,0 0,-37.80917 z"
       style="fill:#000000" />
  </g>
  <g
     id="g4194">
    <title
       id="title4196">Layer 1</title>
    <g
       id="Page-1"
       fill="none"
       fill-rule="evenodd">
      <path
         id="Apple-iPhone-6"
         d="m494,290l1.50142,0c0.82765,0 1.49858,-0.67129 1.49858,-1.49815l0,-72.0037c0,-0.8274 -0.66503,-1.49815 -1.49858,-1.49815l-1.50142,0l0,-140.0006c0,-41.42102 -33.5793,-74.9994 -75.00649,-74.9994l-340.98702,0c-41.42494,0 -75.00649,33.575 -75.00649,74.9994l0,53.0006l-1.50142,0c-0.82764,0 -1.49858,0.67742 -1.49858,1.50784l0,37.98432c0,0.83276 0.66503,1.50784 1.49858,1.50784l1.50142,0l0,46l-1.50142,0c-0.82764,0 -1.49858,0.67129 -1.49858,1.49815l0,72.0037c0,0.8274 0.66503,1.49815 1.49858,1.49815l1.50142,0l0,17l-1.50142,0c-0.82764,0 -1.49858,0.67129 -1.49858,1.49815l0,72.0037c0,0.8274 0.66503,1.49815 1.49858,1.49815l1.50142,0l0,557.0006c0,41.42102 33.5793,74.9994 75.00649,74.9994l340.98702,0c41.42494,0 75.00649,-33.575 75.00649,-74.9994l0,-649.0006zm-461,-167l0,766l431,0l0,-766l-431,0zm215,860c20.98682,0 38,-17.01318 38,-38c0,-20.98682 -17.01318,-38 -38,-38c-20.98682,0 -38,17.01318 -38,38c0,20.98682 17.01318,38 38,38zm0,-4c18.77768,0 34,-15.22232 34,-34c0,-18.77768 -15.22232,-34 -34,-34c-18.77768,0 -34,15.22232 -34,34c0,18.77768 15.22232,34 34,34zm-78,-907c4.41828,0 8,-3.58172 8,-8c0,-4.41828 -3.58172,-8 -8,-8c-4.41828,0 -8,3.58172 -8,8c0,4.41828 3.58172,8 8,8zm79,-35c2.76142,0 5,-2.23858 5,-5c0,-2.76142 -2.23858,-5 -5,-5c-2.76142,0 -5,2.23858 -5,5c0,2.76142 2.23858,5 5,5zm-36.00542,23c-2.20614,0 -3.99458,1.79536 -3.99458,4c0,2.20914 1.78308,4 3.99458,4l72.01084,0c2.20614,0 3.99458,-1.79536 3.99458,-4c0,-2.20914 -1.78308,-4 -3.99458,-4l-72.01084,0z"
         fill="#FFFFFF" />
    </g>
  </g>
</svg>