Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

Обрезается svg-иконка

Обсуждение темы Обрезается svg-иконка в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Есть 2 иконки в формате svg (googleplus и ВКонтакте). Вставляются в html-код идентично: <p>Войти через: <span class="social fb">Facebook</span> <span class="social gp">Google +</span><span class="social ...


Закрытая тема
 
Опции темы
Старый 24.12.2015, 19:30   #1
Есть 2 иконки в формате svg (googleplus и ВКонтакте).
Вставляются в html-код идентично:

<p>Войти через: <span class="social fb">Facebook</span> <span class="social gp">Google +</span><span class="social vk">ВКонтакте</span><span class="social tw">Twitter</span></p>

Точнее иконки 4, все, кроме иконки ВКонтакте отображаются корректно, а ВКонтакте сильно обрезается.
С svg работаю впервые, 3 часа Гуглил, ставил ПО и т.д., проблемы так и не понял. Файлы скриншотов приложены к теме (проблемная иконка 3-я слева)
Когда открываю иконки в Adobe Illustrator, то те иконки, которые нормально отображаются (не обрезаются) в Иллюстраторе в 4 раза больше по размеру, а ВК (проблемная) в 4 раза меньше остальных.
Сохранил иконки в jpeg и открыл в Фотошопе - та же ситуация: размер всех иконок, которые отображаются корректно в 4 раза больше, чем у проблемной ВК, которая обрезается.
Я в ступоре! Подскажите в каком направлении копать?

Вот фрагмент css:
#login .social { display: inline-block; height: 20px; margin-left: 7px; padding: 0 2px; cursor: pointer; border-radius: 3px; }
#login .social:before { content: ""; display: inline-block; width: 15px; height: 15px; vertical-align: top; margin: 3px 5px 0 0; }
#login .social.fb:before { background: url('../img/fc-webicon-facebook.svg') no-repeat; }
#login .social.gp:before { background: url('../img/fc-webicon-googleplus.svg') no-repeat; }
#login .social.tw:before { background: url('../img/fc-webicon-twitter.svg') no-repeat; }
#login .social.vk:before { background: url('../img/fc-webicon-vkontakte.svg') no-repeat; }
#login .social:hover { color: #333; background: #eee; box-shadow: 1px 1px 1px #bbb; }
Изображения
Тип файла: png Что получаем.png (4.1 Кб, 2 просмотров)
Тип файла: png иконка ВК.png (10.7 Кб, 0 просмотров)
 
Старый 24.12.2015, 19:30
Ссылки
Старый 24.12.2015, 21:00   #2
Вопрос решен.
В теге <svg> svg-файла поудалял атрибуты height и width и все стало гуд.
 
Старый 25.12.2015, 10:15   #3
нужно просто нормально сохранять, через люстру, там есть настройки определенные
 
Старый 25.12.2015, 10:15
Закрытая тема


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Иконка Pett HTML, CSS, JavaScript 4 19.09.2009 19:12
обрезается заголовок помогите! Ola123 HTML, CSS, JavaScript 4 01.08.2008 19:24
Если страница обрезается при печати Ulaz HTML, CSS, JavaScript 0 26.11.2007 06:13
Иконка Rog HTML, CSS, JavaScript 10 26.07.2004 14:24
Иконка......... ВЛАСТЕЛИН Технологии Flash 3 16.11.2003 12:56


Текущее время: 08:56. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Тарифный план «Lite»
Место: 1000 Мб
Трафик: неограниченный
Панель управления
Заказать ТП «Lite»
Тарифный план «Normal»
Место: 2000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Normal»
Тарифный план «Profy»
Место: 7000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Profy»
Тарифный план «Места хватит!»
Место: 25 ГБ
Трафик: неограниченный
Поддержка SSI, ssh
Заказать ТП «Места хватит!»
Дизайнерский форум