SVG դիտարկիչ
Տեղադրիր raw SVG markup և անմիջապես preview արա render արված արդյունքը։
Preview-ը անջատում է script-երն ու արտաքին հղումները, բայց միևնույն ժամանակ թույլ է տալիս ստուգել viewBox-ը և չափի տվյալները։
SVG preview. տեղադրիր raw code և անմիջապես ստուգիր արդյունքը
viewBox և չափի ստուգումներ. դիտիր թափանցիկությունն ու հնարավոր վտանգավոր բովանդակությունը
Ինչպես օգտագործել
- Տեղադրիր SVG code-ը կամ բեռնի՛ր `.svg` ֆայլ։
- Փոխիր background-ը և zoom-ի մակարդակը՝ render-ը ստուգելու համար։
- Ստուգիր viewBox-ը, չափի տվյալները և warning-ները, ապա անհրաժեշտության դեպքում պահիր SVG-ը։
Օրինակ
Պարզ icon SVG
Մուտք
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><circle cx="60" cy="60" r="52" fill="#0ea5e9"/><path d="M36 62l16 16 32-40" fill="none" stroke="#fff" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/></svg>
Արդյունք
Կարտացոլվի կապույտ շրջանաձև icon, իսկ info panel-ում viewBox-ը կերևա որպես `0 0 120 120`։
ՀՏՀ
Իմ SVG-ը upload արվո՞ւմ է ինչ-որ տեղ։
Ոչ։ Տեղադրված SVG-ն ու բեռնված ֆայլերը մնում են բրաուզերում և սերվեր չեն ուղարկվում։
Ի՞նչ է տեղի ունենում script կամ foreignObject պարունակող SVG-ների հետ։
Անվտանգ preview-ը render-ից առաջ հեռացնում է այդ տարրերը և info panel-ում ցուցադրում է warning։
Արտաքին պատկերներ կամ տառատեսակներ պարունակող SVG-ները նույնպե՞ս կերևան։
Միշտ չէ։ Արտաքին հղումները անջատվում են, ուստի տեսքը կարող է տարբերվել բնօրինակ միջավայրից։ Այս գործիքը առաջնահերթ տալիս է անվտանգ տեղային ստուգմանը։
Ինչո՞ւ իմ SVG-ը չի render արվում։
Հաճախ պատճառը անվավեր XML-ն է, attribute-ների սխալ արժեքները կամ այն, որ root տարրը `svg` չէ։ Ստուգիր գործիքի ցուցադրած սխալի հաղորդագրությունը։
Ինչո՞ւ փոխեմ background-ը։
Թափանցիկ հատվածներն ու բաց գույնի icon-ները կարող են տարբեր երևալ՝ կախված background-ից, ուստի գործիքը թույլ է տալիս արագ փորձել checker, white և dark background-ներ։
Նշումներ
- Անվտանգության համար render-ից առաջ արտաքին URL հղումներն ու վտանգավոր տարրերն անջատվում են։
- Արտաքին տառատեսակներից կամ պատկերներից կախված SVG-ները կարող են չերևալ այնպես, ինչպես բնօրինակ միջավայրում։
- Շատ մեծ SVG ֆայլերը ավտոմատ դուրս են գալիս live preview ռեժիմից և խնդրում են render անել ձեռքով։