Нужна помощь с обработкой SVG
-
Есть SVG вот такая вот:
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2200 2200"> <defs></defs> <g fill="#000000"> <path d="M923 2035c-121-39-246-123-324-220-58-73-142-245-126-261 2-2 27 11 55 30s71 42 96 51c33 13 56 32 86 71 22 30 65 72 95 95 51 39 57 41 73 26 10-9 34-23 54-31 113-48 222 77 158 181-36 60-96 81-167 58z"></path> <path d="M1204 2036c-90-40-108-157-33-221 44-36 125-36 168 1 31 26 32 26 58 8 54-35 124-108 163-170 22-35 40-68 40-73s6-21 14-36c31-60 14-267-32-362-16-35-21-59-16-70 4-10 9-58 10-108 1-49 2-92 3-94s18 17 39 42c93 114 151 250 152 355 0 35 5 72 10 82 16 30-17 192-56 277-80 176-221 303-403 362-75 24-76 24-117 7zM740 1651c-287-75-488-306-515-592-8-91 9-221 36-265 71-117 248-58 236 79-5 55-32 90-84 109-31 11-33 15-33 58 0 104 64 244 148 328 79 77 223 141 319 142 21 0 44 10 66 30 19 17 40 30 46 30s11 4 11 9 23 18 50 30c28 12 50 25 50 30 0 12-129 31-202 30-35 0-92-8-128-18z"></path> <path d="M1205 1653c-66-14-113-33-194-79-60-33-135-94-178-144-89-102-170-310-122-310 5 0 9-5 9-11 0-13 90-109 102-109 4 0 8 13 8 30 0 48 28 141 62 210 52 101 177 214 261 235 15 4 27 11 27 17 0 5 5 6 10 3 6-3 10-3 10 2 0 4 10 9 23 9 12 1 41 5 63 8 53 9 212-17 265-44 22-12 44-18 48-15 5 3 3 25-4 50-8 25-12 45-9 45 8 0-34 76-48 87-17 14-142 33-210 32-29 0-84-7-123-16z"></path> <path d="M1274 1490c-75-15-124-31-124-40 0-4 15-18 34-30 82-50 166-171 202-288 19-66 17-193-5-276-25-88-97-195-173-254-32-25-55-49-52-53 7-12 81-31 137-35 47-3 50-2 90 42 225 244 226 649 2 890-28 30-55 54-60 53-6-1-29-5-51-9zM1801 1403c1-43 0-80-1-83-10-28-8-73 3-92 21-33 44-114 51-175l5-53-44-19c-106-47-113-187-11-235 74-35 143-7 179 72 18 40 21 66 21 177 1 146-13 206-70 315-32 62-106 161-125 168-4 2-8-32-8-75z"></path> <path d="M552 1361c-23-20-42-42-42-48 0-5-9-18-21-29-28-25-21-73 25-170 72-151 181-257 337-326 48-21 113-43 145-49 75-14 248-6 295 14 31 13 39 24 62 86 26 68 34 111 22 111-4 0-20-7-37-16-62-32-134-47-223-48-99 0-166 17-251 65-51 29-185 145-182 157 1 4-7 25-19 47-29 57-53 141-53 191 0 24-3 45-8 48-4 2-26-13-50-33z"></path> <path d="M704 818c12-61 85-196 137-253 97-106 243-192 364-214 75-14 204-14 281 0 135 24 341 157 363 233 18 68-12 131-78 160-45 21-72 17-121-16-42-29-65-89-52-134 8-28 6-33-17-46-14-9-48-22-76-31-203-63-388-16-530 134-36 38-65 73-65 78s-18 16-40 25-70 34-106 56l-67 40 7-32z"></path> <path d="M458 744c-48-26-78-71-78-117 0-57 27-98 102-153 149-110 309-154 479-134 46 6 90 13 97 15 22 8 13 21-23 34-19 7-40 18-47 24-56 52-95 71-175 84-46 7-106 24-133 38l-49 25 5 47c4 37 1 55-15 80-38 61-110 86-163 57z"></path> </g> </svg>На ней три пересекающихся "круга". Но она немножко неточная, а поэтому - не эффективная, кто-нибудь, кто разбирается, может потратить 15 минут и нарисовать такую же SVG но с идеальными кругами? Чтобы в результате код меньше килобайта был (чем меньше - тем лучше). Нужно для призыва бога наживы. Спасибо.
Фрилансеров хотел позвать, но я в это не умею, регистрироваться там где-то, не хочу разбираться, а 500 рублей заплатить готов. Криптой.
-
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle
Или завтра смогу скинуть
-
Ну, знаете ли, я понимаю, что векторная графика - это изучаемо, но изучать правда не хочу, как минимум инструменты искать. Там же ещё видите - три раза по три элемента, по-разному повернутых, их можно переиспользовать, там вообще файлик красивый должен быть, эффективный.
-
ой тут надо дизайнера =)) как вариант тут это 1 елемент ( 1 картинка ) и добавить их 3 и в css просто повернуть тогда будет и меньше размер
-
А в SVG разве нельзя группировать элементы и потом на них ссылаться? Кажется можно.
А картинку я хотел в шаблоне отрисовать, по контурам оригинала, только в векторе настоящем, с кружками, но это учиться надо.
Сложно новому учиться. -
<svg width="2200" height="2200" xmlns="http://www.w3.org/2000/svg"> <g> <title>Layer 1</title> <path id="svg_3" d="m740,1651c-287,-75 -488,-306 -515,-592c-8,-91 9,-221 36,-265c71,-117 248,-58 236,79c-5,55 -32,90 -84,109c-31,11 -33,15 -33,58c0,104 64,244 148,328c79,77 223,141 319,142c21,0 44,10 66,30c19,17 40,30 46,30s11,4 11,9s23,18 50,30c28,12 50,25 50,30c0,12 -129,31 -202,30c-35,0 -92,-8 -128,-18z"/> <path id="svg_5" d="m1274,1490c-75,-15 -124,-31 -124,-40c0,-4 15,-18 34,-30c82,-50 166,-171 202,-288c19,-66 17,-193 -5,-276c-25,-88 -97,-195 -173,-254c-32,-25 -55,-49 -52,-53c7,-12 81,-31 137,-35c47,-3 50,-2 90,42c225,244 226,649 2,890c-28,30 -55,54 -60,53c-6,-1 -29,-5 -51,-9z"/> <path id="svg_8" d="m458,744c-48,-26 -78,-71 -78,-117c0,-57 27,-98 102,-153c149,-110 309,-154 479,-134c46,6 90,13 97,15c22,8 13,21 -23,34c-19,7 -40,18 -47,24c-56,52 -95,71 -175,84c-46,7 -106,24 -133,38l-49,25l5,47c4,37 1,55 -15,80c-38,61 -110,86 -163,57z"/> </g> </svg>в SVG должен бить 1 элемент , потом из кода можно на него ссылаться и уже поворачивать и тд ( тогда размер SVG будет как 1 элемент ) а если там 3 держать то размер будет 3х
вот пример в 1кб ( но тут нижна рука дизайнера с илюстратором каким )
-
<div class="img1" style="transform: rotate(90deg);"></div> <div class="img1" style="transform: rotate(180deg);"></div> <div class="img1" style="transform: rotate(270deg);"></div>как пример
-
Добрые люди красоту навели, спасибо им.
