maxxtweek
@maxxtweek
Начинающий бекэнд разработчик

Как выровнять svg на сайте?

Всем доброго времени суток.
Есть сайт
На сайте есть svg элемент "casio".Как подвинуть его чуть выше и правее?
Заранее благодарю за ответ.
b4z4ZyFbzQY.jpg
И код СВГ
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="70%"  version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 21400 30100"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <font id="FontID0" horiz-adv-x="507" font-variant="normal" style="fill-rule:nonzero" font-weight="400">
  <font-face 
    font-family="Impact">
  </font-face>
   <missing-glyph><path d="M0 0z"/></missing-glyph>
   <glyph unicode="A" horiz-adv-x="507"><path d="M395.834 791l117.666 -791 -210.167 0 -11.1671 142 -74.166 0 -11.1671 -142 -212.834 0 104.334 791 297.5 0zm-109.167 -509c-9.83295,89.6662 -20.1664,200.667 -31.1662,333.167 -20.3337,-152 -33.1668,-263.001 -38.6667,-333.167l69.833 0z"/></glyph>
   <glyph unicode="O" horiz-adv-x="546"><path d="M510 327.334c0,-79.5 -1.83331,-135.667 -5.66586,-168.667 -3.66662,-33.1668 -15.3342,-63.3334 -35.0001,-90.6671 -19.6672,-27.3323 -46.3332,-48.3324 -79.8332,-63.0002 -33.5,-14.6665 -72.5,-21.9997 -117,-21.9997 -42.3334,0 -80.1678,7.00003 -113.834,20.8341 -33.6673,13.8328 -60.8337,34.4996 -81.1674,62.1665 -20.4996,27.6669 -32.6663,57.8335 -36.6662,90.3326 -3.83389,32.6663 -5.83313,89.6675 -5.83313,171.001l0 135.333c0,79.5 1.83331,135.666 5.6672,168.667 3.66662,33.1668 15.3329,63.3334 34.9988,90.6658 19.6672,27.3337 46.3345,48.3338 79.8345,63.0002 33.4987,14.6665 72.5,21.9997 117,21.9997 42.3334,0 80.1664,-7.00003 113.832,-20.8328 33.6673,-13.8328 60.8337,-34.4996 81.1674,-62.1665 20.4996,-27.6669 32.6663,-57.8335 36.6662,-90.3339 3.83389,-32.6663 5.83313,-89.6662 5.83313,-170.999l0 -135.333zm-206 259.833c0,36.6662 -2.00058,60.166 -6.0004,70.4994 -3.99982,10.1675 -12.1667,15.3329 -24.4994,15.3329 -10.5007,0 -18.5004,-4.16576 -24.1662,-12.4999 -5.49992,-8.16558 -8.33419,-32.6663 -8.33419,-73.3323l0 -369.167c0,-45.834 1.83331,-74.1674 5.49992,-84.834 3.66662,-10.8326 12.1667,-16.1666 25.5004,-16.1666 13.6668,0 22.5002,6.16634 26.3327,18.5004 3.83389,12.3327 5.6672,41.8329 5.6672,88.3333l0 363.334z"/></glyph>
   <glyph unicode="I" horiz-adv-x="288"><path d="M247 791l0 -791 -206 0 0 791 206 0z"/></glyph>
   <glyph unicode="C" horiz-adv-x="553"><path d="M520.999 446l-206 0 0 137.334c0,39.9996 -2.16652,64.8335 -6.49955,74.8338 -4.33303,9.83295 -14.0001,14.8324 -28.8338,14.8324 -16.667,0 -27.3337,-5.99907 -31.8327,-17.9999 -4.5003,-12.1667 -6.83409,-38.1663 -6.83409,-78.1658l0 -367c0,-38.5008 2.33379,-63.5007 6.83409,-75.3329 4.49896,-11.6676 14.6665,-17.5007 30.3326,-17.5007 15.1669,0 25.1672,5.83313 29.8334,17.6667 4.66624,11.6663 7.00003,39.3332 7.00003,82.8334l0 99.5005 206 0 0 -30.8344c0,-81.9997 -5.83313,-140.166 -17.3321,-174.333 -11.5003,-34.3337 -37.1666,-64.3331 -76.6671,-90.1666 -39.6664,-25.8336 -88.3333,-38.6667 -146.334,-38.6667 -60.166,0 -109.833,10.8339 -149,32.6663 -39,21.8338 -64.9995,52.0004 -77.6667,90.6671 -12.6659,38.6667 -18.9995,96.6662 -18.9995,174.167l0 231c0,56.9998 1.99924,99.6664 5.83313,128.167 3.99982,28.5006 15.5002,56.0002 35.0001,82.3329 19.3327,26.3341 46.1672,47.1669 80.4996,62.3338 34.3337,15.1669 73.8341,22.6661 118.5,22.6661 60.5005,0 110.5,-11.6663 150.001,-35.1661 39.3332,-23.3339 65.1667,-52.4995 77.6667,-87.4996 12.3327,-35.0001 18.499,-89.3343 18.499,-163.167l0 -75.167z"/></glyph>
   <glyph unicode="S" horiz-adv-x="517"><path d="M476 551l-191 0 0 58.4999c0,27.3337 -2.50106,44.8331 -7.33323,52.3336 -4.83351,7.49917 -12.8345,11.1658 -24.1676,11.1658 -12.3327,0 -21.6665,-4.99944 -28.0001,-15.1656 -6.33227,-10.0002 -9.49975,-25.1672 -9.49975,-45.6668 0,-26.3341 3.66662,-46.1672 10.8339,-59.5009 7.00003,-13.1664 26.3327,-29.3329 58.1667,-48.3324 91.1663,-54.5001 148.667,-99.3332 172.332,-134.167 23.8343,-34.8329 35.6679,-90.999 35.6679,-168.332 0,-56.3334 -6.66682,-97.8344 -19.8345,-124.668 -13.1664,-26.6659 -38.4995,-49.0002 -76.3325,-67.0001 -37.6671,-18.1658 -81.5006,-27.1664 -131.666,-27.1664 -55.0006,0 -101.834,10.5007 -140.834,31.3335 -38.8327,20.8328 -64.1658,47.3328 -76.3325,79.5 -12.0008,32.3331 -18.0012,78.1672 -18.0012,137.334l0 51.8331 191.001 0 0 -96.167c0,-29.6661 2.66566,-48.6656 7.99965,-57.1658 5.33265,-8.50013 14.8337,-12.6672 28.4992,-12.6672 13.6668,0 23.8343,5.33399 30.5012,16.1666 6.66548,10.6666 9.99889,26.6673 9.99889,47.6673 0,46.4991 -6.33227,76.9989 -18.9995,91.1663 -13.1664,14.3333 -45.1663,38.3335 -96.167,71.9995 -50.9994,33.8332 -84.6667,58.4999 -101.332,73.8341 -16.5011,15.3329 -30.3339,36.5002 -41.1678,63.4994 -10.8326,27.0005 -16.3325,61.5001 -16.3325,103.5 0,60.5005 7.66644,104.833 23.1666,132.833 15.5002,28.0001 40.3328,49.8339 74.8338,65.6672 34.4996,15.8334 75.9993,23.6657 124.832,23.6657 53.3332,0 98.6668,-8.66606 136.334,-25.8322 37.4998,-17.3335 62.3338,-39 74.5006,-65.334 12.1654,-26.1668 18.3331,-70.6667 18.3331,-133.5l0 -31.3335z"/></glyph>
  </font>
  <style type="text/css">
   <![CDATA[
    @font-face { font-family:"Impact";src:url("#FontID0") format(svg)}
    .fil0 {fill:#032364}
    .fnt0 {font-weight:normal;font-size:7472.83px;font-family:'Impact'}
    .fil0:hover {fill:#003296}
   ]]>
  </style>
 </defs>
 <g id="Слой_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <g transform="matrix(1.20613 0 0 1 -13058.1 4757.96)">
   <text x="10700" y="15050"  class="fil0 fnt0">CASIO</text>
  </g>
 </g>
</svg>

Всем заранее благодарю за ответ
  • Вопрос задан
  • 509 просмотров
Пригласить эксперта
Ответы на вопрос 2
@ArtViolence
Не надо тебе svg трогать, сделай картинку или просто текст, шрифт называется Impact.
Ответ написан
Комментировать
@AlexandrKom
уфф )
1. у вас же там 12ти колоночный макет, контейнер для свг имеет класс class="col-xs-6" - расширяйте его насколько вам нужно. Например до class="col-xs-8", а соседний контейнер уменьшайте.
2. свг у вас огромное по высоте, если вы хотите использовать свг, то оно должно быть по размеру контента. Иначе занимая больше места по ширине свг растянется и по высоте, это ненужно.
3. так же есть стиль по id для свг #svg1 {margin-top: -100px; margin-left: 100px; }. посмотрите что он на мобильной версии сайта.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы