SVG ቅድመ እይታ / አርታዒ

የSVG ቅድመ-እይታ / አርታዒ እንዴት እንደሚሰራ

መሣሪያው ምን ያደርጋል

SVG ቅድመ-እይታ / አርታዒ የSVG ማርክአፕን ሲያርቱ በቀጥታ ያቀርባል እና ለፈጣን ምርመራ ሜታዳታ (width, height, viewBox, element count) ያወጣል። አንድ መቀያየሪያ የቼከርድ ጀርባ ይጨምራል ስለዚህ ግልጽ ክልሎችን በግልጽ ማየት ይችላሉ። መሣሪያው እንዲሁም በURL-ኮድ የተቀየረ የdata URI ያመነጫል ይህም በCSS background-image ወይም በHTML src አትሪቢዩቶች ውስጥ በቀጥታ ለመጠቀም ተስማሚ ነው።

የተለመዱ የገንቢ አጠቃቀም ሁኔታዎች

የአይኮን ዲዛይነሮች በተለያዩ መጠኖች የviewBox ሂሳብን እና የstroke ስፋቶችን ይፈትሻሉ። የፊት-ገጽ ገንቢዎች በማሻሻል (በእጅ ወይም በSVGO) በኋላ በእጅ የተስተካከለ SVG አይኮን እንደገና ትክክል መታየቱን ያረጋግጣሉ። የኢሜይል ገንቢዎች በHTML ውስጥ ለማስገባት የብራንድ ምልክቶችን ኮምፓክት የdata URI ስሪቶች ያመነጫሉ። አስተማሪዎች preserveAspectRatio እና overflow ያሉ አትሪቢዩቶች በማቅረብ ላይ እንዴት እንደሚጽናኑ ያሳያሉ።

የውሂብ ቅርጾች፣ አይነቶች ወይም ልዩነቶች

ግቤት ጥሬ SVG XML ማርክአፕ ነው። ውጤት በሳንድቦክስ የተገደበ iframe ውስጥ የተቀረበው ተመሳሳይ SVG እና URL-ኮድ የተቀየረ data URI (data:image/svg+xml;charset=utf-8,…) ነው። የelement-count መለኪያው እያንዳንዱን የመክፈቻ መለያ (defs, g, gradients እና ተመሳሳይ የተደራረቡ ኤለመንቶችን ጨምሮ) ይቆጥራል፣ ይህም የውስብስብነት ግምታዊ ስሜት ይሰጣል። የተወጡ የአትሪቢዩት እሴቶች በጥሬ መልክ ይታያሉ።

የተለመዱ ስህተቶች እና የጠርዝ ሁኔታዎች

`use` ወይም `image` ኤለመንቶች በ href የሚጠቁሙ ውጫዊ ሀብቶች በሳንድቦክስ የተገደበ iframe ውስጥ አይጫኑም። በ script ኤለመንቶች ውስጥ ያለ ውስጣዊ JavaScript በሳንድቦክስ ይታገዳል — እንቅስቃሴዎች በSMIL ወይም በCSS keyframes ላይ መመርኮዝ አለባቸው። በስርዓት ላይ ያልተጫነ የተወሰነ ፎንት ላይ የሚመሰረቱ SVGs ወደ ነባሪ ይመለሳሉ፤ ፎንቶችን ያካትቱ ወይም ለቅድመ-እይታ የስርዓት ፎንቶችን ይጠቀሙ።

ይህን መሣሪያ ከኮድ ጋር መቼ መጠቀም እንደሚገባ

አንድ-ጊዜ የአይኮን ዲዛይን፣ ማስተካከያ (debugging) ወይም data URIs ለማመንጨት የአሳሽ መሣሪያውን ይጠቀሙ። ለምርት ንብረቶች ግን SVGs ን ሜታዳታ ለማስወገድ እና ማርክአፕን ለማነሳሳት በተስተካከለ ኮንፊግ በSVGO ያስኬዱ፣ እና data URIs በየቦታው ከመካተት ይልቅ በመተግበሪያዎ ውስጥ አይኮኖችን ለመጫን የsprite ስርዓት ወይም ተገቢ የbundler ውህደት ይጠቀሙ።