Ошибка «Failed to find definition for url (#pattern0)» в Flutter SVG

13 января 2021

У нас на проекте используется библиотека flutter_svg, которая периодически шлёт в Сентри ошибки типа такой:

FlutterError:
Failed to find definition for url(#paint0_radial)

При этом некоторые иконки после загрузки не отображались в приложении. Решил выяснить, что не так. Пошерстил гугл, наткнулся на обсуждения в гитхабе, на стэковерфлоу.

В моём случае всё оказалось просто: нужно перенести секцию defs в начало SVG-файла, чтобы исправить ошибку. Смотрите пример:

Было так

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M8.00064 12C8.00064 9.79094 9.79094 7.99968 12 7.99968C14.2091 7.99968 16.0003 9.79094 16.0003 12C16.0003 14.2091 14.2091 16.0003 12 16.0003C9.79094 16.0003 8.00064 14.2091 8.00064 12V12ZM5.83814 12C5.83814 15.4032 8.5968 18.1619 12 18.1619C15.4032 18.1619 18.1618 15.4032 18.1618 12C18.1618 8.5968 15.4032 5.83814 12 5.83814C8.5968 5.83814 5.83824 8.59661 5.83824 12H5.83814ZM16.9659 5.59382C16.9658 5.87863 17.0501 6.15707 17.2082 6.39394C17.3664 6.63081 17.5912 6.81547 17.8543 6.92457C18.1174 7.03366 18.4069 7.06229 18.6862 7.00684C18.9656 6.95139 19.2222 6.81435 19.4237 6.61304C19.6252 6.41173 19.7624 6.15521 19.8181 5.8759C19.8738 5.59658 19.8454 5.30704 19.7365 5.04387C19.6276 4.7807 19.4431 4.55573 19.2064 4.3974C18.9696 4.23908 18.6913 4.15451 18.4065 4.1544H18.4059C18.0241 4.15458 17.658 4.30627 17.388 4.57616C17.1181 4.84605 16.9662 5.21207 16.9659 5.59382V5.59382ZM7.152 21.7678C5.98205 21.7145 5.34614 21.5196 4.92355 21.355C4.36329 21.1369 3.96355 20.8771 3.54326 20.4574C3.12297 20.0377 2.86281 19.6383 2.64566 19.0781C2.48093 18.6557 2.28605 18.0196 2.23286 16.8496C2.17469 15.5847 2.16307 15.2048 2.16307 12.0002C2.16307 8.79562 2.17565 8.4167 2.23286 7.15075C2.28614 5.9808 2.48246 5.34595 2.64566 4.9223C2.86377 4.36205 3.12355 3.9623 3.54326 3.54202C3.96297 3.12173 4.36233 2.86157 4.92355 2.64442C5.34595 2.47968 5.98205 2.2848 7.152 2.23162C8.41689 2.17344 8.79686 2.16182 12 2.16182C15.2031 2.16182 15.5835 2.17421 16.8494 2.23181C18.0194 2.28509 18.6542 2.48141 19.0779 2.64461C19.6381 2.86176 20.0379 3.1225 20.4582 3.54221C20.8785 3.96192 21.1377 4.36224 21.3558 4.9225C21.5205 5.3449 21.7154 5.98099 21.7686 7.15094C21.8267 8.4169 21.8384 8.79581 21.8384 12.0004C21.8384 15.205 21.8267 15.5839 21.7686 16.8498C21.7153 18.0198 21.5194 18.6557 21.3558 19.0783C21.1377 19.6385 20.8779 20.0383 20.4582 20.4576C20.0385 20.8769 19.6381 21.1371 19.0779 21.3552C18.6555 21.5199 18.0194 21.7148 16.8494 21.768C15.5845 21.8262 15.2046 21.8378 12 21.8378C8.79542 21.8378 8.41651 21.8262 7.152 21.768V21.7678ZM7.05264 0.0726721C5.77517 0.130848 4.90224 0.333408 4.1399 0.630048C3.35088 0.936384 2.68205 1.34736 2.01417 2.01418C1.3463 2.68099 0.936384 3.34992 0.630048 4.1399C0.333408 4.90272 0.130848 5.77517 0.072672 7.05264C0.0135361 8.33213 0 8.74118 0 12C0 15.2588 0.0135361 15.6679 0.072672 16.9474C0.130848 18.2249 0.333408 19.0973 0.630048 19.8601C0.936384 20.6491 1.3464 21.3193 2.01417 21.9858C2.68195 22.6524 3.34992 23.0628 4.1399 23.37C4.90368 23.6666 5.77517 23.8692 7.05264 23.9273C8.3328 23.9855 8.74118 24 12 24C15.2588 24 15.6679 23.9865 16.9474 23.9273C18.2249 23.8692 19.0973 23.6666 19.8601 23.37C20.6491 23.0628 21.3179 22.6526 21.9858 21.9858C22.6537 21.319 23.0627 20.6491 23.3699 19.8601C23.6666 19.0973 23.8701 18.2248 23.9273 16.9474C23.9855 15.6669 23.999 15.2588 23.999 12C23.999 8.74118 23.9855 8.33213 23.9273 7.05264C23.8691 5.77507 23.6666 4.90224 23.3699 4.1399C23.0627 3.35088 22.6526 2.68205 21.9858 2.01418C21.319 1.3463 20.6491 0.936384 19.861 0.630048C19.0973 0.333408 18.2248 0.129888 16.9483 0.0726721C15.6686 0.0142081 15.2598 0 12.0014 0C8.7431 0 8.33328 0.0135361 7.05312 0.0726721" fill="url(#paint0_radial)"/>
	<defs>
		<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-0.405493 25.6257) scale(36.183 36.1844)">
			<stop offset="0.09" stop-color="#FA8F21"/>
			<stop offset="0.78" stop-color="#D82D7E"/>
		</radialGradient>
	</defs>
</svg>

Стало так

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	<defs>
		<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-0.405493 25.6257) scale(36.183 36.1844)">
			<stop offset="0.09" stop-color="#FA8F21"/>
			<stop offset="0.78" stop-color="#D82D7E"/>
		</radialGradient>
	</defs>
	<path d="M8.00064 12C8.00064 9.79094 9.79094 7.99968 12 7.99968C14.2091 7.99968 16.0003 9.79094 16.0003 12C16.0003 14.2091 14.2091 16.0003 12 16.0003C9.79094 16.0003 8.00064 14.2091 8.00064 12V12ZM5.83814 12C5.83814 15.4032 8.5968 18.1619 12 18.1619C15.4032 18.1619 18.1618 15.4032 18.1618 12C18.1618 8.5968 15.4032 5.83814 12 5.83814C8.5968 5.83814 5.83824 8.59661 5.83824 12H5.83814ZM16.9659 5.59382C16.9658 5.87863 17.0501 6.15707 17.2082 6.39394C17.3664 6.63081 17.5912 6.81547 17.8543 6.92457C18.1174 7.03366 18.4069 7.06229 18.6862 7.00684C18.9656 6.95139 19.2222 6.81435 19.4237 6.61304C19.6252 6.41173 19.7624 6.15521 19.8181 5.8759C19.8738 5.59658 19.8454 5.30704 19.7365 5.04387C19.6276 4.7807 19.4431 4.55573 19.2064 4.3974C18.9696 4.23908 18.6913 4.15451 18.4065 4.1544H18.4059C18.0241 4.15458 17.658 4.30627 17.388 4.57616C17.1181 4.84605 16.9662 5.21207 16.9659 5.59382V5.59382ZM7.152 21.7678C5.98205 21.7145 5.34614 21.5196 4.92355 21.355C4.36329 21.1369 3.96355 20.8771 3.54326 20.4574C3.12297 20.0377 2.86281 19.6383 2.64566 19.0781C2.48093 18.6557 2.28605 18.0196 2.23286 16.8496C2.17469 15.5847 2.16307 15.2048 2.16307 12.0002C2.16307 8.79562 2.17565 8.4167 2.23286 7.15075C2.28614 5.9808 2.48246 5.34595 2.64566 4.9223C2.86377 4.36205 3.12355 3.9623 3.54326 3.54202C3.96297 3.12173 4.36233 2.86157 4.92355 2.64442C5.34595 2.47968 5.98205 2.2848 7.152 2.23162C8.41689 2.17344 8.79686 2.16182 12 2.16182C15.2031 2.16182 15.5835 2.17421 16.8494 2.23181C18.0194 2.28509 18.6542 2.48141 19.0779 2.64461C19.6381 2.86176 20.0379 3.1225 20.4582 3.54221C20.8785 3.96192 21.1377 4.36224 21.3558 4.9225C21.5205 5.3449 21.7154 5.98099 21.7686 7.15094C21.8267 8.4169 21.8384 8.79581 21.8384 12.0004C21.8384 15.205 21.8267 15.5839 21.7686 16.8498C21.7153 18.0198 21.5194 18.6557 21.3558 19.0783C21.1377 19.6385 20.8779 20.0383 20.4582 20.4576C20.0385 20.8769 19.6381 21.1371 19.0779 21.3552C18.6555 21.5199 18.0194 21.7148 16.8494 21.768C15.5845 21.8262 15.2046 21.8378 12 21.8378C8.79542 21.8378 8.41651 21.8262 7.152 21.768V21.7678ZM7.05264 0.0726721C5.77517 0.130848 4.90224 0.333408 4.1399 0.630048C3.35088 0.936384 2.68205 1.34736 2.01417 2.01418C1.3463 2.68099 0.936384 3.34992 0.630048 4.1399C0.333408 4.90272 0.130848 5.77517 0.072672 7.05264C0.0135361 8.33213 0 8.74118 0 12C0 15.2588 0.0135361 15.6679 0.072672 16.9474C0.130848 18.2249 0.333408 19.0973 0.630048 19.8601C0.936384 20.6491 1.3464 21.3193 2.01417 21.9858C2.68195 22.6524 3.34992 23.0628 4.1399 23.37C4.90368 23.6666 5.77517 23.8692 7.05264 23.9273C8.3328 23.9855 8.74118 24 12 24C15.2588 24 15.6679 23.9865 16.9474 23.9273C18.2249 23.8692 19.0973 23.6666 19.8601 23.37C20.6491 23.0628 21.3179 22.6526 21.9858 21.9858C22.6537 21.319 23.0627 20.6491 23.3699 19.8601C23.6666 19.0973 23.8701 18.2248 23.9273 16.9474C23.9855 15.6669 23.999 15.2588 23.999 12C23.999 8.74118 23.9855 8.33213 23.9273 7.05264C23.8691 5.77507 23.6666 4.90224 23.3699 4.1399C23.0627 3.35088 22.6526 2.68205 21.9858 2.01418C21.319 1.3463 20.6491 0.936384 19.861 0.630048C19.0973 0.333408 18.2248 0.129888 16.9483 0.0726721C15.6686 0.0142081 15.2598 0 12.0014 0C8.7431 0 8.33328 0.0135361 7.05312 0.0726721" fill="url(#paint0_radial)"/>
</svg>

Такое поведение связано с тем, как плагин парсит SVG. Для полного понимания почему так, а не иначе, почитайте обсуждение на гитхабе.

Добавить комментарий