SVG પ્રિવ્યુ / એડિટર

SVG Preview / Editor કેવી રીતે કામ કરે છે

આ ટૂલ શું કરે છે

SVG Preview / Editor તમે SVG માર્કઅપ એડિટ કરો તેમ તેને લાઇવ રેન્ડર કરે છે અને ઝડપી ઇન્સ્પેક્શન માટે મેટાડેટા (width, height, viewBox, element count) કાઢે છે. એક ટૉગલ ચેકર્ડ બેકગ્રાઉન્ડ ઉમેરે છે જેથી તમે પારદર્શક વિસ્તારો સ્પષ્ટ રીતે જોઈ શકો. ટૂલ URL-encoded data URI પણ બનાવે છે જે CSS background-image અથવા HTML src એટ્રિબ્યુટ્સમાં સીધું ઉપયોગ કરવા યોગ્ય છે.

ડેવલપર્સ માટેના સામાન્ય ઉપયોગ કેસિસ

આઇકન ડિઝાઇનર્સ અલગ-અલગ સાઇઝ પર viewBox મૅથ અને stroke widths ટેસ્ટ કરે છે. ફ્રન્ટએન્ડ ડેવલપર્સ ઑપ્ટિમાઇઝેશન (મેન્યુઅલ અથવા SVGO દ્વારા) પછી હાથથી એડિટ કરેલું SVG આઇકન હજી પણ યોગ્ય રીતે રેન્ડર થાય છે કે નહીં તે ચકાસે છે. ઇમેઇલ ડેવલપર્સ HTML માં ઇનલાઇન કરવા માટે બ્રાન્ડ માર્ક્સના કોમ્પેક્ટ data URI વર્ઝન્સ જનરેટ કરે છે. એજ્યુકેટર્સ preserveAspectRatio અને overflow જેવા એટ્રિબ્યુટ્સ રેન્ડરિંગને કેવી રીતે અસર કરે છે તે દર્શાવે છે.

ડેટા ફોર્મેટ્સ, પ્રકારો, અથવા વેરિઅન્ટ્સ

ઇનપુટ કાચું SVG XML માર્કઅપ છે. આઉટપુટ એ જ SVG નું સેન્ડબોક્સ્ડ iframe માં રેન્ડરિંગ તેમજ URL-encoded data URI (data:image/svg+xml;charset=utf-8,…) છે. element-count મેટ્રિક દરેક ઓપનિંગ ટૅગ ગણે છે (defs, g, gradients, અને સમાન નેસ્ટેડ એલિમેન્ટ્સ સહિત), જેથી જટિલતાનો અંદાજ મળે. કાઢેલા એટ્રિબ્યુટ મૂલ્યો કાચા સ્વરૂપમાં બતાવવામાં આવે છે.

સામાન્ય ખામીઓ અને એજ કેસિસ

`use` અથવા `image` એલિમેન્ટ્સ દ્વારા href સાથે રેફરન્સ કરાયેલા બાહ્ય રિસોર્સિસ સેન્ડબોક્સ્ડ iframe અંદર લોડ નહીં થાય. script એલિમેન્ટ્સની અંદરનું inline JavaScript સેન્ડબોક્સ દ્વારા બ્લોક થાય છે — એનિમેશન્સ SMIL અથવા CSS keyframes પર આધારિત હોવી જોઈએ. જે SVGs એવા ચોક્કસ ફૉન્ટ પર આધાર રાખે છે જે સિસ્ટમમાં ઇન્સ્ટોલ ન હોય તે ડિફૉલ્ટ પર ફૉલબૅક કરશે; પ્રિવ્યુ માટે ફૉન્ટ્સ એમ્બેડ કરો અથવા સિસ્ટમ ફૉન્ટ્સ વાપરો.

કોડની સામે આ ટૂલ ક્યારે વાપરવું

એક વખતના આઇકન ડિઝાઇન, ડિબગિંગ, અથવા data URIs જનરેટ કરવા માટે બ્રાઉઝર ટૂલ વાપરો. પ્રોડક્શન એસેટ્સ માટે, મેટાડેટા દૂર કરવા અને માર્કઅપ મિનિફાય કરવા માટે ટ્યુન કરેલા કન્ફિગ સાથે SVGs ને SVGO મારફતે ચલાવો, અને દરેક જગ્યાએ data URIs ઇનલાઇન કરવા બદલે તમારી એપમાં આઇકન્સ લોડ કરવા માટે sprite સિસ્ટમ અથવા યોગ્ય bundler ઇન્ટિગ્રેશન વાપરો.