@Grione

Почему текст в svg экспортируется как path?

Я экспортирую svg из фигмы. И получается, что в коде svg где текст у меня теги <path>. Но мне требуется динамически менять текст в изображении. Подскажите, это косяк дизайнера в создании свг или я неправильно экспортирую или вообще так и работает свг?
637f1778cc7dc500917820.jpeg

Сама свг:
<svg xmlns="http://www.w3.org/2000/svg" width="88" height="84" viewBox="0 0 88 84" fill="none">
<rect x="0.216797" width="87.614" height="83.7373" rx="13.935" fill="url(#paint0_linear_246_4739)"/>
<path d="M21.8689 43.561V49.5125L17.0803 43.561H16.1454V51.542H17.2855V45.5905L22.0741 51.542H23.009V43.561H21.8689ZM31.053 51.542H32.3869L28.7613 47.1525L32.1703 43.561H30.8706L26.538 48.019V43.561H25.3979V51.542H26.538V49.4783L27.9974 47.9962L31.053 51.542ZM34.7328 50.5501V47.9734H38.7347V47.0042H34.7328V44.5529H39.2249V43.561H33.5926V51.542H39.3845V50.5501H34.7328Z" fill="#EDEEF2"/>
<path d="M21.561 65.8341C21.561 64.2721 20.1929 63.8958 18.9159 63.5766V60.9201C19.5544 60.9543 20.2385 61.1709 20.8542 61.5585L21.2304 60.6464C20.6261 60.236 19.771 59.9851 18.9159 59.9509V58.6626H18.1862V59.9623C16.419 60.1106 15.6095 61.0911 15.6095 62.2198C15.6095 63.7704 16.9321 64.1695 18.1862 64.4773V67.1224C17.2627 67.0654 16.3734 66.7006 15.8376 66.2103L15.4157 67.0996C16.0086 67.6469 17.0689 68.0345 18.1862 68.0915V69.3799H18.9159V68.0915C20.7173 67.9433 21.561 66.9628 21.561 65.8341ZM16.7269 62.1742C16.7269 61.5699 17.1715 61.0569 18.1862 60.9315V63.3942C17.3653 63.1775 16.7269 62.8811 16.7269 62.1742ZM18.9159 67.111V64.6597C19.7596 64.8877 20.4437 65.1728 20.4437 65.9025C20.4437 66.5181 19.9763 67.0084 18.9159 67.111Z" fill="#EDEEF2"/>
<path d="M27.7077 60.0307V61.0227H29.5091V68.0117H30.6378V60.0307H27.7077ZM39.327 65.0702H37.8106V63.3371H36.7389V65.0702H33.6719L37.5826 60.0307H36.3513L32.2696 65.2526V66.0507H36.7047V68.0117H37.8106V66.0507H39.327V65.0702ZM39.2649 60.0307V61.0227H41.0664V68.0117H42.1951V60.0307H39.2649ZM44.6933 68.0801C45.1038 68.0801 45.4458 67.7495 45.4458 67.2934C45.4458 66.8374 45.1038 66.5181 44.6933 66.5181C44.2715 66.5181 43.918 66.8374 43.918 67.2934C43.918 67.7495 44.2715 68.0801 44.6933 68.0801ZM49.8336 63.1661C48.8417 63.1661 47.998 63.531 47.5419 64.2151C47.5305 64.1124 47.5305 64.0212 47.5305 63.93C47.5305 61.9348 48.568 60.9201 50.187 60.9201C50.7571 60.9201 51.3044 61.0227 51.7148 61.2963L52.1481 60.407C51.635 60.0878 50.9167 59.9395 50.1642 59.9395C47.9295 59.9395 46.3904 61.3989 46.3904 64.1238C46.3904 66.6664 47.5989 68.1029 49.7424 68.1029C51.3272 68.1029 52.5699 67.1224 52.5699 65.5832C52.5699 64.1124 51.4184 63.1661 49.8336 63.1661ZM49.6968 67.1794C48.4654 67.1794 47.8041 66.4611 47.8041 65.6402C47.8041 64.7623 48.5566 64.0896 49.6398 64.0896C50.7571 64.0896 51.464 64.6939 51.464 65.6288C51.464 66.5751 50.7343 67.1794 49.6968 67.1794ZM56.8704 63.1661C55.8785 63.1661 55.0347 63.531 54.5787 64.2151C54.5673 64.1124 54.5673 64.0212 54.5673 63.93C54.5673 61.9348 55.6048 60.9201 57.2238 60.9201C57.7939 60.9201 58.3412 61.0227 58.7516 61.2963L59.1849 60.407C58.6718 60.0878 57.9535 59.9395 57.201 59.9395C54.9663 59.9395 53.4272 61.3989 53.4272 64.1238C53.4272 66.6664 54.6357 68.1029 56.7792 68.1029C58.364 68.1029 59.6067 67.1224 59.6067 65.5832C59.6067 64.1124 58.4552 63.1661 56.8704 63.1661ZM56.7336 67.1794C55.5022 67.1794 54.8409 66.4611 54.8409 65.6402C54.8409 64.7623 55.5934 64.0896 56.6765 64.0896C57.7939 64.0896 58.5008 64.6939 58.5008 65.6288C58.5008 66.5751 57.7711 67.1794 56.7336 67.1794Z" fill="#EDEEF2"/>
<g clip-path="url(#clip0_246_4739)">
<path d="M30.0648 18.6131L25.3871 19.8376C23.7352 20.2464 22.2902 20.7908 20.8977 20.3142C19.005 19.4967 19.0389 17.3699 20.45 15.1074C17.9551 17.1664 13.4658 23.7504 19.5375 24.4152C20.3109 24.517 21.6881 24.2456 23.184 23.6164L30.0648 20.7925L43.6363 15.2431L31.7506 18.1704L30.0648 18.6131Z" fill="white"/>
</g>
<defs>
<linearGradient id="paint0_linear_246_4739" x1="16.8104" y1="-30.3548" x2="95.8659" y2="6.32896" gradientUnits="userSpaceOnUse">
<stop stop-color="#F8772E"/>
<stop offset="1" stop-color="#F59331"/>
</linearGradient>
<clipPath id="clip0_246_4739">
<rect width="27.1371" height="27.1371" fill="white" transform="translate(16.4988 6.20215)"/>
</clipPath>
</defs>
</svg>
  • Вопрос задан
  • 70 просмотров
Решения вопроса 1
sfi0zy
@sfi0zy
Creative frontend developer
При экспортировании там есть настройки (три точки вызывают всплывающий список параметров), и там есть пункт "Outline Text". Он как раз отвечает за то, будут ли буквы как буквы, или они будут конвертироваться в path. По умолчанию они конвертируются.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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