if4752
@if4752

SVG — как сделать?

Всем привет!

Подскажите как из такой SVG:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="49px" height="26px" viewBox="0 0 49 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
    <title>logo_logo</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-size="26" font-family="TrebuchetMS-Bold, Trebuchet MS" letter-spacing="2" font-weight="bold">
        <text id="logo" fill="#568BB7">
            <tspan x="0" y="20">logo</tspan>
            <tspan x="42.8291016" y="20">i</tspan>
        </text>
    </g>
</svg>


сделать такую:
background: url("data:image/svg+xml;charset=utf8,%3Csvg width='110' height='35' viewBox='0 0 110 35' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EE1B97653-48C6-441B-94F6-A906AC57412C%3C/title%3E%3Cpath d='M72.073 17.191c.072-.777.864-2.262 2.735-2.262 2.088 0 2.448 1.626 2.52 2.262h-5.255zm2.807-4.525c-3.526 0-5.902 2.546-5.902 5.798 0 3.252 2.376 5.798 5.974 5.798 3.6 0 5.11-2.475 5.11-2.475l-2.303-1.485s-.791 1.556-2.807 1.556c-2.087 0-2.95-1.768-2.95-2.404h8.277s.072-.495.072-.636v-.354c0-3.323-2.016-5.798-5.47-5.798zm13.748 0c-2.016 0-3.167 1.061-3.527 1.485V12.95h-3.023v16.333h3.095v-6.364c.36.354 1.583 1.344 3.455 1.344 2.879 0 5.542-2.121 5.542-5.798.072-3.889-2.88-5.798-5.542-5.798zm2.807 5.727c0 1.839-1.08 3.394-3.167 3.394-2.087 0-3.239-1.697-3.239-3.394 0-1.696 1.152-3.393 3.239-3.393 2.015.07 3.167 1.555 3.167 3.393zM27.52 21.504v-3.959c-.144-3.464-1.656-4.879-4.823-4.879-2.159 0-3.598.849-4.102 1.202l.863 2.263S20.755 15 22.41 15c2.376 0 2.088 1.909 2.088 1.909-.792 0-7.198-.354-7.198 3.747 0 2.262 1.943 3.535 4.03 3.535 1.872 0 2.952-.919 3.24-1.273 0 .071.072 1.061.072 1.061h2.879c.144 0 0-.99 0-2.475zm-2.88-2.12c0 1.484-.863 2.545-2.519 2.545-1.583 0-1.727-.92-1.727-1.273 0-.849.72-1.343 2.52-1.556.503-.07 1.007-.07 1.51-.07h.217v.353zm12.092-1.839l-3.886-4.525-.072-.141h-2.663v11.1h3.095v-6.434l3.023 3.747.072.071h.791l3.095-3.889v6.505h3.095v-11.1H40.62l-3.887 4.666zM103.6 8L95.68 29.211h3.24L106.837 8h-3.24zm-92.56 0H6v15.979h3.239v-5.656h1.727c3.311 0 6.046-1.697 6.046-5.162C17.012 9.768 14.277 8 11.038 8zm2.734 5.232c0 1.838-1.799 2.475-3.023 2.475H9.167v-5.02h1.583c1.224 0 3.023.707 3.023 2.545zm37.715-.353a5.031 5.031 0 0 0-2.879.919c.072-.354.432-3.323 4.463-3.323h2.519L56.527 8h-3.383c-4.463 0-7.917 2.05-7.917 9.191 0 3.89 1.727 7.07 5.902 7.07 3.958 0 5.974-2.827 5.974-5.655 0-4.03-3.095-5.727-5.615-5.727zm2.52 5.797c0 1.273-.72 3.111-2.807 3.111-2.088 0-2.951-1.626-2.951-3.181 0-1.556.863-2.97 2.95-2.97 2.088 0 2.808 1.768 2.808 3.04zm11.444 5.303h3.31l-4.102-11.1H61.42l-4.175 11.1h3.383l2.376-7.07h.071l2.376 7.07z' fill='%23315efb' fill-rule='evenodd' /%3E%3C/svg%3E") no-repeat 50%;


Mac OS, есть Sketch
  • Вопрос задан
  • 797 просмотров
Решения вопроса 1
nickolyashka
@nickolyashka
base64 конвертер:
www.askapache.com/online-tools/base64-image-converter

Если вручную + статья + encoder/decoder :
https://css-tricks.com/probably-dont-base64-svg/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы