[{"data":1,"prerenderedAt":3685},["ShallowReactive",2],{"navigation":3,"/api/loaders/use-svg":466,"/api/loaders/use-svg-surround":3680},[4,22],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","1.getting-started/1.index",[9,10,14,18],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","/getting-started/installation","1.getting-started/2.installation",{"title":15,"path":16,"stem":17},"Usage","/getting-started/usage","1.getting-started/3.usage",{"title":19,"path":20,"stem":21},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide",{"title":23,"path":24,"stem":25,"children":26},"Api","/api","2.api",[27,30,80,110,152,186,280,306,340,390,432],{"title":28,"path":24,"stem":29},"All","2.api/index",{"title":31,"path":32,"stem":33,"children":34},"Abstractions","/api/abstractions","2.api/1.abstractions/index",[35,36,40,44,48,52,56,60,64,68,72,76],{"title":31,"path":32,"stem":33},{"title":37,"path":38,"stem":39},"Align","/api/abstractions/align","2.api/1.abstractions/align",{"title":41,"path":42,"stem":43},"Billboard","/api/abstractions/billboard","2.api/1.abstractions/billboard",{"title":45,"path":46,"stem":47},"Camera Shake","/api/abstractions/camera-shake","2.api/1.abstractions/camera-shake",{"title":49,"path":50,"stem":51},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":53,"path":54,"stem":55},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":57,"path":58,"stem":59},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":61,"path":62,"stem":63},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":65,"path":66,"stem":67},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":69,"path":70,"stem":71},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":73,"path":74,"stem":75},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":77,"path":78,"stem":79},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":81,"path":82,"stem":83,"children":84},"Controls","/api/controls","2.api/2.controls/index",[85,86,90,94,98,102,106],{"title":81,"path":82,"stem":83},{"title":87,"path":88,"stem":89},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":91,"path":92,"stem":93},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":95,"path":96,"stem":97},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":99,"path":100,"stem":101},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":103,"path":104,"stem":105},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":107,"path":108,"stem":109},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":111,"path":112,"stem":113,"children":114},"Loaders","/api/loaders","2.api/3.loaders/index",[115,116,120,124,128,132,136,140,144,148],{"title":111,"path":112,"stem":113},{"title":117,"path":118,"stem":119},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":121,"path":122,"stem":123},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":125,"path":126,"stem":127},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":129,"path":130,"stem":131},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":133,"path":134,"stem":135},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":137,"path":138,"stem":139},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":141,"path":142,"stem":143},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":145,"path":146,"stem":147},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":149,"path":150,"stem":151},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":153,"path":154,"stem":155,"children":156},"Materials","/api/materials","2.api/4.materials/index",[157,158,162,166,170,174,178,182],{"title":153,"path":154,"stem":155},{"title":159,"path":160,"stem":161},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":163,"path":164,"stem":165},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":167,"path":168,"stem":169},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":171,"path":172,"stem":173},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":175,"path":176,"stem":177},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":179,"path":180,"stem":181},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":183,"path":184,"stem":185},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":187,"path":188,"stem":189,"children":190},"Shapes","/api/shapes","2.api/5.shapes/index",[191,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276],{"title":187,"path":188,"stem":189},{"title":193,"path":194,"stem":195},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":197,"path":198,"stem":199},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":201,"path":202,"stem":203},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":205,"path":206,"stem":207},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":209,"path":210,"stem":211},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":213,"path":214,"stem":215},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":217,"path":218,"stem":219},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":221,"path":222,"stem":223},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":225,"path":226,"stem":227},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":229,"path":230,"stem":231},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":233,"path":234,"stem":235},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":237,"path":238,"stem":239},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":241,"path":242,"stem":243},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":245,"path":246,"stem":247},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":249,"path":250,"stem":251},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":253,"path":254,"stem":255},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":257,"path":258,"stem":259},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":261,"path":262,"stem":263},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":265,"path":266,"stem":267},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":269,"path":270,"stem":271},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":273,"path":274,"stem":275},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":277,"path":278,"stem":279},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":281,"path":282,"stem":283,"children":284},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[285,286,290,294,298,302],{"title":281,"path":282,"stem":283},{"title":287,"path":288,"stem":289},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":291,"path":292,"stem":293},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":295,"path":296,"stem":297},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":299,"path":300,"stem":301},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":303,"path":304,"stem":305},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":307,"path":308,"stem":309,"children":310},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[311,312,316,320,324,328,332,336],{"title":307,"path":308,"stem":309},{"title":313,"path":314,"stem":315},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":317,"path":318,"stem":319},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":321,"path":322,"stem":323},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":325,"path":326,"stem":327},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":329,"path":330,"stem":331},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":333,"path":334,"stem":335},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":337,"path":338,"stem":339},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":341,"path":342,"stem":343,"children":344},"Staging","/api/staging","2.api/8.staging/index",[345,346,350,354,358,362,366,370,374,378,382,386],{"title":341,"path":342,"stem":343},{"title":347,"path":348,"stem":349},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":351,"path":352,"stem":353},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":355,"path":356,"stem":357},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":359,"path":360,"stem":361},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":363,"path":364,"stem":365},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":367,"path":368,"stem":369},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":371,"path":372,"stem":373},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":375,"path":376,"stem":377},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":379,"path":380,"stem":381},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":383,"path":384,"stem":385},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":387,"path":388,"stem":389},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":391,"path":392,"stem":393,"children":394},"Objects","/api/objects","2.api/9.objects/index",[395,396,400,404,408,412,416,420,424,428],{"title":391,"path":392,"stem":393},{"title":397,"path":398,"stem":399},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":401,"path":402,"stem":403},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":405,"path":406,"stem":407},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":409,"path":410,"stem":411},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":413,"path":414,"stem":415},"HTML","/api/objects/html","2.api/9.objects/html",{"title":417,"path":418,"stem":419},"Image","/api/objects/image","2.api/9.objects/image",{"title":421,"path":422,"stem":423},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":425,"path":426,"stem":427},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":429,"path":430,"stem":431},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":433,"path":434,"stem":435,"children":436},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[437,438,442,446,450,454,458,462],{"title":433,"path":434,"stem":435},{"title":439,"path":440,"stem":441},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":443,"path":444,"stem":445},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":447,"path":448,"stem":449},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":451,"path":452,"stem":453},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":455,"path":456,"stem":457},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":459,"path":460,"stem":461},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":463,"path":464,"stem":465},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":467,"title":141,"body":468,"description":3674,"extension":3675,"links":3676,"meta":3677,"navigation":598,"path":142,"seo":3678,"stem":143,"__hash__":3679},"docs/2.api/3.loaders/7.use-svg.md",{"type":469,"value":470,"toc":3649},"minimark",[471,477,494,499,505,509,1149,1154,1170,1174,1177,1292,1296,1378,1382,1494,1498,1503,1563,1568,1916,1920,1925,1931,1936,1942,1962,1968,1983,2030,2033,2038,2049,2054,2057,2102,2106,2111,2114,2119,2128,2173,2178,2183,2195,2200,2242,2246,2249,2379,2383,2387,2716,2720,3048,3052,3059,3280,3284,3455,3459,3466,3469,3473,3484,3488,3512,3520,3533,3537,3564,3568,3589,3599,3607,3624,3631,3645],[472,473,474],"scene-wrapper",{},[475,476],"loaders-use-svg",{},[478,479,480,481,485,486,489,490,493],"p",{},"Load and display SVG elements in your ",[482,483,484],"strong",{},"TresJS"," scene. This guide covers both the ",[487,488,141],"code",{}," composable for advanced use cases and the ",[487,491,492],{},"SVG"," component for simple declarative rendering.",[495,496,498],"h2",{"id":497},"usesvg-composable","useSVG Composable",[478,500,501,502,504],{},"The ",[487,503,141],{}," composable provides direct access to processed SVG layers, giving you full control over the resulting geometries and materials.",[506,507,15],"h3",{"id":508},"usage",[510,511,512,934],"code-group",{},[513,514,526],"pre",{"className":515,"code":516,"filename":517,"highlights":518,"language":524,"meta":525,"style":525},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\n\nconst svgPath = './logo.svg'\nconst { state, layers, isLoading, dispose } = useSVG(svgPath, {\n  skipFills: false,\n  fillMaterial: { transparent: true, opacity: 0.8 }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup v-if=\"!isLoading\">\n    \u003CTresMesh\n      v-for=\"(layer, index) in layers\"\n      :key=\"`layer-${index}`\"\n      :geometry=\"layer.geometry\"\n      :render-order=\"index\"\n    >\n      \u003CTresMeshBasicMaterial v-bind=\"layer.material\" />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n","TheModel.vue",[519,520,521,522,523],2,5,6,7,8,"vue","",[487,527,528,563,593,600,618,661,677,709,717,727,732,742,768,777,808,833,854,870,876,904,915,925],{"__ignoreMap":525},[529,530,533,537,541,545,548,551,554,558,560],"span",{"class":531,"line":532},"line",1,[529,534,536],{"class":535},"sMK4o","\u003C",[529,538,540],{"class":539},"swJcz","script",[529,542,544],{"class":543},"spNyl"," setup",[529,546,547],{"class":543}," lang",[529,549,550],{"class":535},"=",[529,552,553],{"class":535},"\"",[529,555,557],{"class":556},"sfazB","ts",[529,559,553],{"class":535},[529,561,562],{"class":535},">\n",[529,564,567,571,574,578,581,584,587,590],{"class":565,"line":519},[531,566],"highlight",[529,568,570],{"class":569},"s7zQu","import",[529,572,573],{"class":535}," {",[529,575,577],{"class":576},"sTEyZ"," useSVG",[529,579,580],{"class":535}," }",[529,582,583],{"class":569}," from",[529,585,586],{"class":535}," '",[529,588,589],{"class":556},"@tresjs/cientos",[529,591,592],{"class":535},"'\n",[529,594,596],{"class":531,"line":595},3,[529,597,599],{"emptyLinePlaceholder":598},true,"\n",[529,601,603,606,609,611,613,616],{"class":531,"line":602},4,[529,604,605],{"class":543},"const",[529,607,608],{"class":576}," svgPath ",[529,610,550],{"class":535},[529,612,586],{"class":535},[529,614,615],{"class":556},"./logo.svg",[529,617,592],{"class":535},[529,619,621,623,625,628,631,634,636,639,641,644,647,650,653,656,658],{"class":620,"line":520},[531,566],[529,622,605],{"class":543},[529,624,573],{"class":535},[529,626,627],{"class":576}," state",[529,629,630],{"class":535},",",[529,632,633],{"class":576}," layers",[529,635,630],{"class":535},[529,637,638],{"class":576}," isLoading",[529,640,630],{"class":535},[529,642,643],{"class":576}," dispose ",[529,645,646],{"class":535},"}",[529,648,649],{"class":535}," =",[529,651,577],{"class":652},"s2Zo4",[529,654,655],{"class":576},"(svgPath",[529,657,630],{"class":535},[529,659,660],{"class":535}," {\n",[529,662,664,667,670,674],{"class":663,"line":521},[531,566],[529,665,666],{"class":539},"  skipFills",[529,668,669],{"class":535},":",[529,671,673],{"class":672},"sfNiH"," false",[529,675,676],{"class":535},",\n",[529,678,680,683,685,687,690,692,695,697,700,702,706],{"class":679,"line":522},[531,566],[529,681,682],{"class":539},"  fillMaterial",[529,684,669],{"class":535},[529,686,573],{"class":535},[529,688,689],{"class":539}," transparent",[529,691,669],{"class":535},[529,693,694],{"class":672}," true",[529,696,630],{"class":535},[529,698,699],{"class":539}," opacity",[529,701,669],{"class":535},[529,703,705],{"class":704},"sbssI"," 0.8",[529,707,708],{"class":535}," }\n",[529,710,712,714],{"class":711,"line":523},[531,566],[529,713,646],{"class":535},[529,715,716],{"class":576},")\n",[529,718,720,723,725],{"class":531,"line":719},9,[529,721,722],{"class":535},"\u003C/",[529,724,540],{"class":539},[529,726,562],{"class":535},[529,728,730],{"class":531,"line":729},10,[529,731,599],{"emptyLinePlaceholder":598},[529,733,735,737,740],{"class":531,"line":734},11,[529,736,536],{"class":535},[529,738,739],{"class":539},"template",[529,741,562],{"class":535},[529,743,745,748,751,754,756,758,761,764,766],{"class":531,"line":744},12,[529,746,747],{"class":535},"  \u003C",[529,749,750],{"class":539},"TresGroup",[529,752,753],{"class":569}," v-if",[529,755,550],{"class":535},[529,757,553],{"class":535},[529,759,760],{"class":535},"!",[529,762,763],{"class":576},"isLoading",[529,765,553],{"class":535},[529,767,562],{"class":535},[529,769,771,774],{"class":531,"line":770},13,[529,772,773],{"class":535},"    \u003C",[529,775,776],{"class":539},"TresMesh\n",[529,778,780,783,785,787,790,793,796,799,802,805],{"class":531,"line":779},14,[529,781,782],{"class":569},"      v-for",[529,784,550],{"class":535},[529,786,553],{"class":535},[529,788,789],{"class":535},"(",[529,791,792],{"class":576},"layer",[529,794,795],{"class":535},", ",[529,797,798],{"class":576},"index",[529,800,801],{"class":535},") in ",[529,803,804],{"class":576},"layers",[529,806,807],{"class":535},"\"\n",[529,809,811,814,817,819,822,825,828,830],{"class":531,"line":810},15,[529,812,813],{"class":535},"      :",[529,815,816],{"class":543},"key",[529,818,550],{"class":535},[529,820,821],{"class":535},"\"`",[529,823,824],{"class":556},"layer-",[529,826,827],{"class":535},"${",[529,829,798],{"class":576},[529,831,832],{"class":535},"}`\"\n",[529,834,836,838,841,843,845,847,850,852],{"class":531,"line":835},16,[529,837,813],{"class":535},[529,839,840],{"class":543},"geometry",[529,842,550],{"class":535},[529,844,553],{"class":535},[529,846,792],{"class":576},[529,848,849],{"class":535},".",[529,851,840],{"class":576},[529,853,807],{"class":535},[529,855,857,859,862,864,866,868],{"class":531,"line":856},17,[529,858,813],{"class":535},[529,860,861],{"class":543},"render-order",[529,863,550],{"class":535},[529,865,553],{"class":535},[529,867,798],{"class":576},[529,869,807],{"class":535},[529,871,873],{"class":531,"line":872},18,[529,874,875],{"class":535},"    >\n",[529,877,879,882,885,888,890,892,894,896,899,901],{"class":531,"line":878},19,[529,880,881],{"class":535},"      \u003C",[529,883,884],{"class":539},"TresMeshBasicMaterial",[529,886,887],{"class":543}," v-bind",[529,889,550],{"class":535},[529,891,553],{"class":535},[529,893,792],{"class":576},[529,895,849],{"class":535},[529,897,898],{"class":576},"material",[529,900,553],{"class":535},[529,902,903],{"class":535}," />\n",[529,905,907,910,913],{"class":531,"line":906},20,[529,908,909],{"class":535},"    \u003C/",[529,911,912],{"class":539},"TresMesh",[529,914,562],{"class":535},[529,916,918,921,923],{"class":531,"line":917},21,[529,919,920],{"class":535},"  \u003C/",[529,922,750],{"class":539},[529,924,562],{"class":535},[529,926,928,930,932],{"class":531,"line":927},22,[529,929,722],{"class":535},[529,931,739],{"class":539},[529,933,562],{"class":535},[513,935,938],{"className":515,"code":936,"filename":937,"language":524,"meta":525,"style":525},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#333\">\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 10]\" />\n    \u003COrbitControls />\n    \u003CTheModel />\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight />\n  \u003C/TresCanvas>\n\u003C/template>\n","app.vue",[487,939,940,960,979,999,1016,1024,1028,1036,1057,1097,1106,1115,1124,1133,1141],{"__ignoreMap":525},[529,941,942,944,946,948,950,952,954,956,958],{"class":531,"line":532},[529,943,536],{"class":535},[529,945,540],{"class":539},[529,947,544],{"class":543},[529,949,547],{"class":543},[529,951,550],{"class":535},[529,953,553],{"class":535},[529,955,557],{"class":556},[529,957,553],{"class":535},[529,959,562],{"class":535},[529,961,962,964,966,969,971,973,975,977],{"class":531,"line":519},[529,963,570],{"class":569},[529,965,573],{"class":535},[529,967,968],{"class":576}," OrbitControls",[529,970,580],{"class":535},[529,972,583],{"class":569},[529,974,586],{"class":535},[529,976,589],{"class":556},[529,978,592],{"class":535},[529,980,981,983,985,988,990,992,994,997],{"class":531,"line":595},[529,982,570],{"class":569},[529,984,573],{"class":535},[529,986,987],{"class":576}," TresCanvas",[529,989,580],{"class":535},[529,991,583],{"class":569},[529,993,586],{"class":535},[529,995,996],{"class":556},"@tresjs/core",[529,998,592],{"class":535},[529,1000,1001,1003,1006,1009,1011,1014],{"class":531,"line":602},[529,1002,570],{"class":569},[529,1004,1005],{"class":576}," TheModel ",[529,1007,1008],{"class":569},"from",[529,1010,586],{"class":535},[529,1012,1013],{"class":556},"./TheModel.vue",[529,1015,592],{"class":535},[529,1017,1018,1020,1022],{"class":531,"line":520},[529,1019,722],{"class":535},[529,1021,540],{"class":539},[529,1023,562],{"class":535},[529,1025,1026],{"class":531,"line":521},[529,1027,599],{"emptyLinePlaceholder":598},[529,1029,1030,1032,1034],{"class":531,"line":522},[529,1031,536],{"class":535},[529,1033,739],{"class":539},[529,1035,562],{"class":535},[529,1037,1038,1040,1043,1046,1048,1050,1053,1055],{"class":531,"line":523},[529,1039,747],{"class":535},[529,1041,1042],{"class":539},"TresCanvas",[529,1044,1045],{"class":543}," clear-color",[529,1047,550],{"class":535},[529,1049,553],{"class":535},[529,1051,1052],{"class":556},"#333",[529,1054,553],{"class":535},[529,1056,562],{"class":535},[529,1058,1059,1061,1064,1067,1070,1072,1074,1077,1080,1082,1085,1087,1090,1093,1095],{"class":531,"line":719},[529,1060,773],{"class":535},[529,1062,1063],{"class":539},"TresPerspectiveCamera",[529,1065,1066],{"class":535}," :",[529,1068,1069],{"class":543},"position",[529,1071,550],{"class":535},[529,1073,553],{"class":535},[529,1075,1076],{"class":535},"[",[529,1078,1079],{"class":704},"0",[529,1081,795],{"class":535},[529,1083,1084],{"class":704},"2",[529,1086,795],{"class":535},[529,1088,1089],{"class":704},"10",[529,1091,1092],{"class":535},"]",[529,1094,553],{"class":535},[529,1096,903],{"class":535},[529,1098,1099,1101,1104],{"class":531,"line":729},[529,1100,773],{"class":535},[529,1102,1103],{"class":539},"OrbitControls",[529,1105,903],{"class":535},[529,1107,1108,1110,1113],{"class":531,"line":734},[529,1109,773],{"class":535},[529,1111,1112],{"class":539},"TheModel",[529,1114,903],{"class":535},[529,1116,1117,1119,1122],{"class":531,"line":744},[529,1118,773],{"class":535},[529,1120,1121],{"class":539},"TresAmbientLight",[529,1123,903],{"class":535},[529,1125,1126,1128,1131],{"class":531,"line":770},[529,1127,773],{"class":535},[529,1129,1130],{"class":539},"TresDirectionalLight",[529,1132,903],{"class":535},[529,1134,1135,1137,1139],{"class":531,"line":779},[529,1136,920],{"class":535},[529,1138,1042],{"class":539},[529,1140,562],{"class":535},[529,1142,1143,1145,1147],{"class":531,"line":810},[529,1144,722],{"class":535},[529,1146,739],{"class":539},[529,1148,562],{"class":535},[478,1150,501,1151,1153],{},[487,1152,141],{}," composable provides direct access to processed SVG layers, giving you full control over how they're rendered. This is particularly useful when you need to:",[1155,1156,1157,1161,1164,1167],"ul",{},[1158,1159,1160],"li",{},"Manually control layer rendering",[1158,1162,1163],{},"Apply custom animations to individual layers",[1158,1165,1166],{},"Access geometry data programmatically",[1158,1168,1169],{},"Implement complex material logic",[506,1171,1173],{"id":1172},"svg-data-sources","SVG Data Sources",[478,1175,1176],{},"The composable accepts both file paths and inline SVG strings:",[513,1178,1181],{"className":1179,"code":1180,"language":557,"meta":525,"style":525},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useSVG } from '@tresjs/cientos'\n\n// From file\nconst { layers } = useSVG('/path/to/file.svg')\n\n// Inline SVG string\nconst svgString = `\u003Csvg viewBox=\"0 0 100 100\">\n  \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" />\n\u003C/svg>`\nconst { layers } = useSVG(svgString)\n",[487,1182,1183,1201,1205,1211,1238,1242,1247,1262,1267,1275],{"__ignoreMap":525},[529,1184,1185,1187,1189,1191,1193,1195,1197,1199],{"class":531,"line":532},[529,1186,570],{"class":569},[529,1188,573],{"class":535},[529,1190,577],{"class":576},[529,1192,580],{"class":535},[529,1194,583],{"class":569},[529,1196,586],{"class":535},[529,1198,589],{"class":556},[529,1200,592],{"class":535},[529,1202,1203],{"class":531,"line":519},[529,1204,599],{"emptyLinePlaceholder":598},[529,1206,1207],{"class":531,"line":595},[529,1208,1210],{"class":1209},"sHwdD","// From file\n",[529,1212,1213,1215,1217,1220,1222,1224,1226,1228,1231,1234,1236],{"class":531,"line":602},[529,1214,605],{"class":543},[529,1216,573],{"class":535},[529,1218,1219],{"class":576}," layers ",[529,1221,646],{"class":535},[529,1223,649],{"class":535},[529,1225,577],{"class":652},[529,1227,789],{"class":576},[529,1229,1230],{"class":535},"'",[529,1232,1233],{"class":556},"/path/to/file.svg",[529,1235,1230],{"class":535},[529,1237,716],{"class":576},[529,1239,1240],{"class":531,"line":520},[529,1241,599],{"emptyLinePlaceholder":598},[529,1243,1244],{"class":531,"line":521},[529,1245,1246],{"class":1209},"// Inline SVG string\n",[529,1248,1249,1251,1254,1256,1259],{"class":531,"line":522},[529,1250,605],{"class":543},[529,1252,1253],{"class":576}," svgString ",[529,1255,550],{"class":535},[529,1257,1258],{"class":535}," `",[529,1260,1261],{"class":556},"\u003Csvg viewBox=\"0 0 100 100\">\n",[529,1263,1264],{"class":531,"line":523},[529,1265,1266],{"class":556},"  \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" />\n",[529,1268,1269,1272],{"class":531,"line":719},[529,1270,1271],{"class":556},"\u003C/svg>",[529,1273,1274],{"class":535},"`\n",[529,1276,1277,1279,1281,1283,1285,1287,1289],{"class":531,"line":729},[529,1278,605],{"class":543},[529,1280,573],{"class":535},[529,1282,1219],{"class":576},[529,1284,646],{"class":535},[529,1286,649],{"class":535},[529,1288,577],{"class":652},[529,1290,1291],{"class":576},"(svgString)\n",[506,1293,1295],{"id":1294},"return-values","Return Values",[1297,1298,1299,1316],"table",{},[1300,1301,1302],"thead",{},[1303,1304,1305,1310,1313],"tr",{},[1306,1307,1309],"th",{"align":1308},"left","Name",[1306,1311,1312],{},"Type",[1306,1314,1315],{},"Description",[1317,1318,1319,1335,1349,1363],"tbody",{},[1303,1320,1321,1327,1332],{},[1322,1323,1324],"td",{"align":1308},[482,1325,1326],{},"state",[1322,1328,1329],{},[487,1330,1331],{},"SVGResult",[1322,1333,1334],{},"The loaded SVG state from SVGLoader",[1303,1336,1337,1341,1346],{},[1322,1338,1339],{"align":1308},[482,1340,804],{},[1322,1342,1343],{},[487,1344,1345],{},"SVGLayer[]",[1322,1347,1348],{},"Computed array of processed geometries and materials",[1303,1350,1351,1355,1360],{},[1322,1352,1353],{"align":1308},[482,1354,763],{},[1322,1356,1357],{},[487,1358,1359],{},"boolean",[1322,1361,1362],{},"Whether the SVG is currently loading",[1303,1364,1365,1370,1375],{},[1322,1366,1367],{"align":1308},[482,1368,1369],{},"dispose",[1322,1371,1372],{},[487,1373,1374],{},"() => void",[1322,1376,1377],{},"Function to dispose of all geometries",[506,1379,1381],{"id":1380},"options","Options",[1297,1383,1384,1397],{},[1300,1385,1386],{},[1303,1387,1388,1390,1392,1395],{},[1306,1389,1309],{"align":1308},[1306,1391,1312],{},[1306,1393,1394],{},"Default",[1306,1396,1315],{},[1317,1398,1399,1418,1436,1456,1474],{},[1303,1400,1401,1406,1410,1415],{},[1322,1402,1403],{"align":1308},[482,1404,1405],{},"skipStrokes",[1322,1407,1408],{},[487,1409,1359],{},[1322,1411,1412],{},[487,1413,1414],{},"false",[1322,1416,1417],{},"Whether to skip rendering strokes",[1303,1419,1420,1425,1429,1433],{},[1322,1421,1422],{"align":1308},[482,1423,1424],{},"skipFills",[1322,1426,1427],{},[487,1428,1359],{},[1322,1430,1431],{},[487,1432,1414],{},[1322,1434,1435],{},"Whether to skip rendering fills",[1303,1437,1438,1443,1448,1453],{},[1322,1439,1440],{"align":1308},[482,1441,1442],{},"fillMaterial",[1322,1444,1445],{},[487,1446,1447],{},"MeshBasicMaterialParameters",[1322,1449,1450],{},[487,1451,1452],{},"{}",[1322,1454,1455],{},"Material properties for fill layers",[1303,1457,1458,1463,1467,1471],{},[1322,1459,1460],{"align":1308},[482,1461,1462],{},"strokeMaterial",[1322,1464,1465],{},[487,1466,1447],{},[1322,1468,1469],{},[487,1470,1452],{},[1322,1472,1473],{},"Material properties for stroke layers",[1303,1475,1476,1481,1486,1491],{},[1322,1477,1478],{"align":1308},[482,1479,1480],{},"depth",[1322,1482,1483],{},[487,1484,1485],{},"'renderOrder' | 'flat' | 'offsetZ' | number",[1322,1487,1488],{},[487,1489,1490],{},"'renderOrder'",[1322,1492,1493],{},"How layers should be rendered in 3D space",[506,1495,1497],{"id":1496},"working-with-layers","Working with Layers",[478,1499,501,1500,1502],{},[487,1501,804],{}," computed property returns an array of processed SVG elements, each containing:",[513,1504,1506],{"className":1179,"code":1505,"language":557,"meta":525,"style":525},"interface SVGLayer {\n  geometry: BufferGeometry // Three.js geometry for the layer\n  material: MeshBasicMaterialParameters // Material properties\n  isStroke: boolean // Whether this layer is a stroke or fill\n}\n",[487,1507,1508,1519,1532,1545,1558],{"__ignoreMap":525},[529,1509,1510,1513,1517],{"class":531,"line":532},[529,1511,1512],{"class":543},"interface",[529,1514,1516],{"class":1515},"sBMFI"," SVGLayer",[529,1518,660],{"class":535},[529,1520,1521,1524,1526,1529],{"class":531,"line":519},[529,1522,1523],{"class":539},"  geometry",[529,1525,669],{"class":535},[529,1527,1528],{"class":1515}," BufferGeometry",[529,1530,1531],{"class":1209}," // Three.js geometry for the layer\n",[529,1533,1534,1537,1539,1542],{"class":531,"line":595},[529,1535,1536],{"class":539},"  material",[529,1538,669],{"class":535},[529,1540,1541],{"class":1515}," MeshBasicMaterialParameters",[529,1543,1544],{"class":1209}," // Material properties\n",[529,1546,1547,1550,1552,1555],{"class":531,"line":602},[529,1548,1549],{"class":539},"  isStroke",[529,1551,669],{"class":535},[529,1553,1554],{"class":1515}," boolean",[529,1556,1557],{"class":1209}," // Whether this layer is a stroke or fill\n",[529,1559,1560],{"class":531,"line":520},[529,1561,1562],{"class":535},"}\n",[1564,1565,1567],"h4",{"id":1566},"accessing-individual-layers","Accessing Individual Layers",[513,1569,1572],{"className":515,"code":1570,"highlights":1571,"language":524,"meta":525,"style":525},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\n\nconst { layers } = useSVG('/complex-icon.svg')\n\n// Apply different materials based on layer type\nconst getFillColor = (layer: SVGLayer, index: number) => {\n  return layer.isStroke ? '#000000' : `hsl(${index * 30}, 70%, 50%)`\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup>\n    \u003CTresMesh\n      v-for=\"(layer, index) in layers\"\n      :key=\"index\"\n      :geometry=\"layer.geometry\"\n    >\n      \u003CTresMeshBasicMaterial\n        v-bind=\"layer.material\"\n        :color=\"getFillColor(layer, index)\"\n      />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n",[519,602],[487,1573,1574,1594,1613,1617,1643,1647,1652,1689,1737,1741,1749,1753,1761,1769,1775,1797,1811,1829,1833,1840,1857,1884,1889,1898,1907],{"__ignoreMap":525},[529,1575,1576,1578,1580,1582,1584,1586,1588,1590,1592],{"class":531,"line":532},[529,1577,536],{"class":535},[529,1579,540],{"class":539},[529,1581,544],{"class":543},[529,1583,547],{"class":543},[529,1585,550],{"class":535},[529,1587,553],{"class":535},[529,1589,557],{"class":556},[529,1591,553],{"class":535},[529,1593,562],{"class":535},[529,1595,1597,1599,1601,1603,1605,1607,1609,1611],{"class":1596,"line":519},[531,566],[529,1598,570],{"class":569},[529,1600,573],{"class":535},[529,1602,577],{"class":576},[529,1604,580],{"class":535},[529,1606,583],{"class":569},[529,1608,586],{"class":535},[529,1610,589],{"class":556},[529,1612,592],{"class":535},[529,1614,1615],{"class":531,"line":595},[529,1616,599],{"emptyLinePlaceholder":598},[529,1618,1620,1622,1624,1626,1628,1630,1632,1634,1636,1639,1641],{"class":1619,"line":602},[531,566],[529,1621,605],{"class":543},[529,1623,573],{"class":535},[529,1625,1219],{"class":576},[529,1627,646],{"class":535},[529,1629,649],{"class":535},[529,1631,577],{"class":652},[529,1633,789],{"class":576},[529,1635,1230],{"class":535},[529,1637,1638],{"class":556},"/complex-icon.svg",[529,1640,1230],{"class":535},[529,1642,716],{"class":576},[529,1644,1645],{"class":531,"line":520},[529,1646,599],{"emptyLinePlaceholder":598},[529,1648,1649],{"class":531,"line":521},[529,1650,1651],{"class":1209},"// Apply different materials based on layer type\n",[529,1653,1654,1656,1659,1661,1664,1667,1669,1671,1673,1676,1678,1681,1684,1687],{"class":531,"line":522},[529,1655,605],{"class":543},[529,1657,1658],{"class":576}," getFillColor ",[529,1660,550],{"class":535},[529,1662,1663],{"class":535}," (",[529,1665,792],{"class":1666},"sHdIc",[529,1668,669],{"class":535},[529,1670,1516],{"class":1515},[529,1672,630],{"class":535},[529,1674,1675],{"class":1666}," index",[529,1677,669],{"class":535},[529,1679,1680],{"class":1515}," number",[529,1682,1683],{"class":535},")",[529,1685,1686],{"class":543}," =>",[529,1688,660],{"class":535},[529,1690,1691,1694,1697,1699,1702,1705,1707,1710,1712,1714,1716,1719,1721,1724,1727,1730,1732,1735],{"class":531,"line":523},[529,1692,1693],{"class":569},"  return",[529,1695,1696],{"class":576}," layer",[529,1698,849],{"class":535},[529,1700,1701],{"class":576},"isStroke",[529,1703,1704],{"class":535}," ?",[529,1706,586],{"class":535},[529,1708,1709],{"class":556},"#000000",[529,1711,1230],{"class":535},[529,1713,1066],{"class":535},[529,1715,1258],{"class":535},[529,1717,1718],{"class":556},"hsl(",[529,1720,827],{"class":535},[529,1722,1723],{"class":576},"index ",[529,1725,1726],{"class":535},"*",[529,1728,1729],{"class":704}," 30",[529,1731,646],{"class":535},[529,1733,1734],{"class":556},", 70%, 50%)",[529,1736,1274],{"class":535},[529,1738,1739],{"class":531,"line":719},[529,1740,1562],{"class":535},[529,1742,1743,1745,1747],{"class":531,"line":729},[529,1744,722],{"class":535},[529,1746,540],{"class":539},[529,1748,562],{"class":535},[529,1750,1751],{"class":531,"line":734},[529,1752,599],{"emptyLinePlaceholder":598},[529,1754,1755,1757,1759],{"class":531,"line":744},[529,1756,536],{"class":535},[529,1758,739],{"class":539},[529,1760,562],{"class":535},[529,1762,1763,1765,1767],{"class":531,"line":770},[529,1764,747],{"class":535},[529,1766,750],{"class":539},[529,1768,562],{"class":535},[529,1770,1771,1773],{"class":531,"line":779},[529,1772,773],{"class":535},[529,1774,776],{"class":539},[529,1776,1777,1779,1781,1783,1785,1787,1789,1791,1793,1795],{"class":531,"line":810},[529,1778,782],{"class":569},[529,1780,550],{"class":535},[529,1782,553],{"class":535},[529,1784,789],{"class":535},[529,1786,792],{"class":576},[529,1788,795],{"class":535},[529,1790,798],{"class":576},[529,1792,801],{"class":535},[529,1794,804],{"class":576},[529,1796,807],{"class":535},[529,1798,1799,1801,1803,1805,1807,1809],{"class":531,"line":835},[529,1800,813],{"class":535},[529,1802,816],{"class":543},[529,1804,550],{"class":535},[529,1806,553],{"class":535},[529,1808,798],{"class":576},[529,1810,807],{"class":535},[529,1812,1813,1815,1817,1819,1821,1823,1825,1827],{"class":531,"line":856},[529,1814,813],{"class":535},[529,1816,840],{"class":543},[529,1818,550],{"class":535},[529,1820,553],{"class":535},[529,1822,792],{"class":576},[529,1824,849],{"class":535},[529,1826,840],{"class":576},[529,1828,807],{"class":535},[529,1830,1831],{"class":531,"line":872},[529,1832,875],{"class":535},[529,1834,1835,1837],{"class":531,"line":878},[529,1836,881],{"class":535},[529,1838,1839],{"class":539},"TresMeshBasicMaterial\n",[529,1841,1842,1845,1847,1849,1851,1853,1855],{"class":531,"line":906},[529,1843,1844],{"class":543},"        v-bind",[529,1846,550],{"class":535},[529,1848,553],{"class":535},[529,1850,792],{"class":576},[529,1852,849],{"class":535},[529,1854,898],{"class":576},[529,1856,807],{"class":535},[529,1858,1859,1862,1865,1867,1869,1872,1874,1876,1878,1880,1882],{"class":531,"line":917},[529,1860,1861],{"class":535},"        :",[529,1863,1864],{"class":543},"color",[529,1866,550],{"class":535},[529,1868,553],{"class":535},[529,1870,1871],{"class":652},"getFillColor",[529,1873,789],{"class":535},[529,1875,792],{"class":576},[529,1877,795],{"class":535},[529,1879,798],{"class":576},[529,1881,1683],{"class":535},[529,1883,807],{"class":535},[529,1885,1886],{"class":531,"line":927},[529,1887,1888],{"class":535},"      />\n",[529,1890,1892,1894,1896],{"class":531,"line":1891},23,[529,1893,909],{"class":535},[529,1895,912],{"class":539},[529,1897,562],{"class":535},[529,1899,1901,1903,1905],{"class":531,"line":1900},24,[529,1902,920],{"class":535},[529,1904,750],{"class":539},[529,1906,562],{"class":535},[529,1908,1910,1912,1914],{"class":531,"line":1909},25,[529,1911,722],{"class":535},[529,1913,739],{"class":539},[529,1915,562],{"class":535},[506,1917,1919],{"id":1918},"depth-handling","Depth Handling",[478,1921,501,1922,1924],{},[487,1923,1480],{}," option controls how SVG layers are rendered in 3D space. It accepts the following values:",[1564,1926,1928,1930],{"id":1927},"renderorder-default",[487,1929,1490],{}," (Default)",[478,1932,1933],{},[482,1934,1935],{},"Use case: Lone SVGs or applications that don't rely on stacked SVGs",[478,1937,1938,1939,1941],{},"This is the default ",[487,1940,1480],{}," option.",[478,1943,1944,1945,1948,1949,1951,1952,1961],{},"This value sets the materials' ",[487,1946,1947],{},"depthWrite"," to ",[487,1950,1414],{}," and increments the mesh layers ",[1953,1954,1958],"a",{"href":1955,"rel":1956},"https://threejs.org/docs/?q=mesh#api/en/core/Object3D.renderOrder",[1957],"nofollow",[487,1959,1960],{},"renderOrder",". This makes the SVG layers render dependably regardless of perspective.",[478,1963,1964,1967],{},[482,1965,1966],{},"Disadvantage",": Scene objects may render out of order.",[478,1969,1970,1971,1976,1977,1982],{},"SVG layers with higher ",[1953,1972,1974],{"href":1955,"rel":1973},[1957],[487,1975,1960],{}," will be rendered after (i.e., sometimes \"on top of\") other objects in the scene graph with a lower ",[1953,1978,1980],{"href":1955,"rel":1979},[1957],[487,1981,1960],{},". Depending on their settings, those other objects may render behind the SVG, even if they are closer to the camera.",[513,1984,1986],{"className":1179,"code":1985,"language":557,"meta":525,"style":525},"const { layers } = useSVG('/icon.svg', { depth: 'renderOrder' })\n",[487,1987,1988],{"__ignoreMap":525},[529,1989,1990,1992,1994,1996,1998,2000,2002,2004,2006,2009,2011,2013,2015,2018,2020,2022,2024,2026,2028],{"class":531,"line":532},[529,1991,605],{"class":543},[529,1993,573],{"class":535},[529,1995,1219],{"class":576},[529,1997,646],{"class":535},[529,1999,649],{"class":535},[529,2001,577],{"class":652},[529,2003,789],{"class":576},[529,2005,1230],{"class":535},[529,2007,2008],{"class":556},"/icon.svg",[529,2010,1230],{"class":535},[529,2012,630],{"class":535},[529,2014,573],{"class":535},[529,2016,2017],{"class":539}," depth",[529,2019,669],{"class":535},[529,2021,586],{"class":535},[529,2023,1960],{"class":556},[529,2025,1230],{"class":535},[529,2027,580],{"class":535},[529,2029,716],{"class":576},[1564,2031,2032],{"id":2032},"flat",[478,2034,2035],{},[482,2036,2037],{},"Use case: simple SVGs",[478,2039,2040,2041,1948,2047,849],{},"This option sets the materials ",[1953,2042,2045],{"href":2043,"rel":2044},"https://threejs.org/docs/?q=mesh#api/en/materials/Material.depthWrite",[1957],[487,2046,1947],{},[487,2048,1414],{},[478,2050,2051,2053],{},[482,2052,1966],{},": SVG layers may render out of order.",[478,2055,2056],{},"Overlapping layers in an SVG may be drawn out of order, depending on viewing perspective.",[513,2058,2060],{"className":1179,"code":2059,"language":557,"meta":525,"style":525},"const { layers } = useSVG('/icon.svg', { depth: 'flat' })\n",[487,2061,2062],{"__ignoreMap":525},[529,2063,2064,2066,2068,2070,2072,2074,2076,2078,2080,2082,2084,2086,2088,2090,2092,2094,2096,2098,2100],{"class":531,"line":532},[529,2065,605],{"class":543},[529,2067,573],{"class":535},[529,2069,1219],{"class":576},[529,2071,646],{"class":535},[529,2073,649],{"class":535},[529,2075,577],{"class":652},[529,2077,789],{"class":576},[529,2079,1230],{"class":535},[529,2081,2008],{"class":556},[529,2083,1230],{"class":535},[529,2085,630],{"class":535},[529,2087,573],{"class":535},[529,2089,2017],{"class":539},[529,2091,669],{"class":535},[529,2093,586],{"class":535},[529,2095,2032],{"class":556},[529,2097,1230],{"class":535},[529,2099,580],{"class":535},[529,2101,716],{"class":576},[1564,2103,2105],{"id":2104},"offsetz","offsetZ",[478,2107,2108],{},[482,2109,2110],{},"Use case: unscaled SVGs seen from the front",[478,2112,2113],{},"When this value is passed, the result is a 3D \"stack\" of mesh layers. A small space is added between each mesh layer in the \"stack\".",[478,2115,2116,2118],{},[482,2117,1966],{},": \"Bottom\" of the \"stack\" is visible; layers may z-fight.",[478,2120,2121,2122,2127],{},"When seen from behind, the \"bottom\" of the mesh layer \"stack\" is visible. The space between the layers may be noticeable depending on viewing perspective and scale. The layers may ",[1953,2123,2126],{"href":2124,"rel":2125},"https://en.wikipedia.org/wiki/Z-fighting",[1957],"z-fight",", particularly if the SVG is scaled down.",[513,2129,2131],{"className":1179,"code":2130,"language":557,"meta":525,"style":525},"const { layers } = useSVG('/icon.svg', { depth: 'offsetZ' })\n",[487,2132,2133],{"__ignoreMap":525},[529,2134,2135,2137,2139,2141,2143,2145,2147,2149,2151,2153,2155,2157,2159,2161,2163,2165,2167,2169,2171],{"class":531,"line":532},[529,2136,605],{"class":543},[529,2138,573],{"class":535},[529,2140,1219],{"class":576},[529,2142,646],{"class":535},[529,2144,649],{"class":535},[529,2146,577],{"class":652},[529,2148,789],{"class":576},[529,2150,1230],{"class":535},[529,2152,2008],{"class":556},[529,2154,1230],{"class":535},[529,2156,630],{"class":535},[529,2158,573],{"class":535},[529,2160,2017],{"class":539},[529,2162,669],{"class":535},[529,2164,586],{"class":535},[529,2166,2105],{"class":556},[529,2168,1230],{"class":535},[529,2170,580],{"class":535},[529,2172,716],{"class":576},[1564,2174,2176],{"id":2175},"number",[487,2177,2175],{},[478,2179,2180],{},[482,2181,2182],{},"Use case: SVGs seen from the front",[478,2184,2185,2186,2189,2190,2194],{},"This is the same as ",[487,2187,2188],{},"'offsetZ'"," but allows you to specify how much space is added between each layer, in order to eliminate ",[1953,2191,2193],{"href":2124,"rel":2192},[1957],"z-fighting",". For most use cases, this should be a value greater than 0.025 and less than 1.",[478,2196,2197,2199],{},[482,2198,1966],{},": \"Bottom\" of the \"stack\" is visible.",[513,2201,2203],{"className":1179,"code":2202,"language":557,"meta":525,"style":525},"const { layers } = useSVG('/icon.svg', { depth: 0.1 })\n",[487,2204,2205],{"__ignoreMap":525},[529,2206,2207,2209,2211,2213,2215,2217,2219,2221,2223,2225,2227,2229,2231,2233,2235,2238,2240],{"class":531,"line":532},[529,2208,605],{"class":543},[529,2210,573],{"class":535},[529,2212,1219],{"class":576},[529,2214,646],{"class":535},[529,2216,649],{"class":535},[529,2218,577],{"class":652},[529,2220,789],{"class":576},[529,2222,1230],{"class":535},[529,2224,2008],{"class":556},[529,2226,1230],{"class":535},[529,2228,630],{"class":535},[529,2230,573],{"class":535},[529,2232,2017],{"class":539},[529,2234,669],{"class":535},[529,2236,2237],{"class":704}," 0.1",[529,2239,580],{"class":535},[529,2241,716],{"class":576},[506,2243,2245],{"id":2244},"memory-management","Memory Management",[478,2247,2248],{},"Always dispose of geometries when the component unmounts:",[513,2250,2252],{"className":515,"code":2251,"language":524,"meta":525,"style":525},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\nimport { onUnmounted } from 'vue'\n\nconst { dispose } = useSVG('/icon.svg')\n\nonUnmounted(() => {\n  dispose()\n})\n\u003C/script>\n",[487,2253,2254,2274,2292,2311,2315,2339,2343,2357,2365,2371],{"__ignoreMap":525},[529,2255,2256,2258,2260,2262,2264,2266,2268,2270,2272],{"class":531,"line":532},[529,2257,536],{"class":535},[529,2259,540],{"class":539},[529,2261,544],{"class":543},[529,2263,547],{"class":543},[529,2265,550],{"class":535},[529,2267,553],{"class":535},[529,2269,557],{"class":556},[529,2271,553],{"class":535},[529,2273,562],{"class":535},[529,2275,2276,2278,2280,2282,2284,2286,2288,2290],{"class":531,"line":519},[529,2277,570],{"class":569},[529,2279,573],{"class":535},[529,2281,577],{"class":576},[529,2283,580],{"class":535},[529,2285,583],{"class":569},[529,2287,586],{"class":535},[529,2289,589],{"class":556},[529,2291,592],{"class":535},[529,2293,2294,2296,2298,2301,2303,2305,2307,2309],{"class":531,"line":595},[529,2295,570],{"class":569},[529,2297,573],{"class":535},[529,2299,2300],{"class":576}," onUnmounted",[529,2302,580],{"class":535},[529,2304,583],{"class":569},[529,2306,586],{"class":535},[529,2308,524],{"class":556},[529,2310,592],{"class":535},[529,2312,2313],{"class":531,"line":602},[529,2314,599],{"emptyLinePlaceholder":598},[529,2316,2317,2319,2321,2323,2325,2327,2329,2331,2333,2335,2337],{"class":531,"line":520},[529,2318,605],{"class":543},[529,2320,573],{"class":535},[529,2322,643],{"class":576},[529,2324,646],{"class":535},[529,2326,649],{"class":535},[529,2328,577],{"class":652},[529,2330,789],{"class":576},[529,2332,1230],{"class":535},[529,2334,2008],{"class":556},[529,2336,1230],{"class":535},[529,2338,716],{"class":576},[529,2340,2341],{"class":531,"line":521},[529,2342,599],{"emptyLinePlaceholder":598},[529,2344,2345,2348,2350,2353,2355],{"class":531,"line":522},[529,2346,2347],{"class":652},"onUnmounted",[529,2349,789],{"class":576},[529,2351,2352],{"class":535},"()",[529,2354,1686],{"class":543},[529,2356,660],{"class":535},[529,2358,2359,2362],{"class":531,"line":523},[529,2360,2361],{"class":652},"  dispose",[529,2363,2364],{"class":539},"()\n",[529,2366,2367,2369],{"class":531,"line":719},[529,2368,646],{"class":535},[529,2370,716],{"class":576},[529,2372,2373,2375,2377],{"class":531,"line":729},[529,2374,722],{"class":535},[529,2376,540],{"class":539},[529,2378,562],{"class":535},[506,2380,2382],{"id":2381},"advanced-usage","Advanced Usage",[1564,2384,2386],{"id":2385},"conditional-layer-rendering","Conditional Layer Rendering",[513,2388,2390],{"className":515,"code":2389,"language":524,"meta":525,"style":525},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\nimport { computed } from 'vue'\n\nconst showDetails = ref(true)\nconst { layers } = useSVG('/detailed-icon.svg')\n\nconst visibleLayers = computed(() =>\n  showDetails.value\n    ? layers.value\n    : layers.value.filter(layer => !layer.isStroke)\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup>\n    \u003CTresMesh\n      v-for=\"(layer, index) in visibleLayers\"\n      :key=\"index\"\n      :geometry=\"layer.geometry\"\n    >\n      \u003CTresMeshBasicMaterial v-bind=\"layer.material\" />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n",[487,2391,2392,2412,2430,2449,2453,2472,2497,2501,2519,2529,2540,2573,2577,2585,2589,2597,2605,2611,2634,2648,2666,2670,2692,2700,2708],{"__ignoreMap":525},[529,2393,2394,2396,2398,2400,2402,2404,2406,2408,2410],{"class":531,"line":532},[529,2395,536],{"class":535},[529,2397,540],{"class":539},[529,2399,544],{"class":543},[529,2401,547],{"class":543},[529,2403,550],{"class":535},[529,2405,553],{"class":535},[529,2407,557],{"class":556},[529,2409,553],{"class":535},[529,2411,562],{"class":535},[529,2413,2414,2416,2418,2420,2422,2424,2426,2428],{"class":531,"line":519},[529,2415,570],{"class":569},[529,2417,573],{"class":535},[529,2419,577],{"class":576},[529,2421,580],{"class":535},[529,2423,583],{"class":569},[529,2425,586],{"class":535},[529,2427,589],{"class":556},[529,2429,592],{"class":535},[529,2431,2432,2434,2436,2439,2441,2443,2445,2447],{"class":531,"line":595},[529,2433,570],{"class":569},[529,2435,573],{"class":535},[529,2437,2438],{"class":576}," computed",[529,2440,580],{"class":535},[529,2442,583],{"class":569},[529,2444,586],{"class":535},[529,2446,524],{"class":556},[529,2448,592],{"class":535},[529,2450,2451],{"class":531,"line":602},[529,2452,599],{"emptyLinePlaceholder":598},[529,2454,2455,2457,2460,2462,2465,2467,2470],{"class":531,"line":520},[529,2456,605],{"class":543},[529,2458,2459],{"class":576}," showDetails ",[529,2461,550],{"class":535},[529,2463,2464],{"class":652}," ref",[529,2466,789],{"class":576},[529,2468,2469],{"class":672},"true",[529,2471,716],{"class":576},[529,2473,2474,2476,2478,2480,2482,2484,2486,2488,2490,2493,2495],{"class":531,"line":521},[529,2475,605],{"class":543},[529,2477,573],{"class":535},[529,2479,1219],{"class":576},[529,2481,646],{"class":535},[529,2483,649],{"class":535},[529,2485,577],{"class":652},[529,2487,789],{"class":576},[529,2489,1230],{"class":535},[529,2491,2492],{"class":556},"/detailed-icon.svg",[529,2494,1230],{"class":535},[529,2496,716],{"class":576},[529,2498,2499],{"class":531,"line":522},[529,2500,599],{"emptyLinePlaceholder":598},[529,2502,2503,2505,2508,2510,2512,2514,2516],{"class":531,"line":523},[529,2504,605],{"class":543},[529,2506,2507],{"class":576}," visibleLayers ",[529,2509,550],{"class":535},[529,2511,2438],{"class":652},[529,2513,789],{"class":576},[529,2515,2352],{"class":535},[529,2517,2518],{"class":543}," =>\n",[529,2520,2521,2524,2526],{"class":531,"line":719},[529,2522,2523],{"class":576},"  showDetails",[529,2525,849],{"class":535},[529,2527,2528],{"class":576},"value\n",[529,2530,2531,2534,2536,2538],{"class":531,"line":729},[529,2532,2533],{"class":535},"    ?",[529,2535,633],{"class":576},[529,2537,849],{"class":535},[529,2539,2528],{"class":576},[529,2541,2542,2545,2547,2549,2552,2554,2557,2559,2561,2563,2566,2568,2570],{"class":531,"line":734},[529,2543,2544],{"class":535},"    :",[529,2546,633],{"class":576},[529,2548,849],{"class":535},[529,2550,2551],{"class":576},"value",[529,2553,849],{"class":535},[529,2555,2556],{"class":652},"filter",[529,2558,789],{"class":576},[529,2560,792],{"class":1666},[529,2562,1686],{"class":543},[529,2564,2565],{"class":535}," !",[529,2567,792],{"class":576},[529,2569,849],{"class":535},[529,2571,2572],{"class":576},"isStroke)\n",[529,2574,2575],{"class":531,"line":744},[529,2576,716],{"class":576},[529,2578,2579,2581,2583],{"class":531,"line":770},[529,2580,722],{"class":535},[529,2582,540],{"class":539},[529,2584,562],{"class":535},[529,2586,2587],{"class":531,"line":779},[529,2588,599],{"emptyLinePlaceholder":598},[529,2590,2591,2593,2595],{"class":531,"line":810},[529,2592,536],{"class":535},[529,2594,739],{"class":539},[529,2596,562],{"class":535},[529,2598,2599,2601,2603],{"class":531,"line":835},[529,2600,747],{"class":535},[529,2602,750],{"class":539},[529,2604,562],{"class":535},[529,2606,2607,2609],{"class":531,"line":856},[529,2608,773],{"class":535},[529,2610,776],{"class":539},[529,2612,2613,2615,2617,2619,2621,2623,2625,2627,2629,2632],{"class":531,"line":872},[529,2614,782],{"class":569},[529,2616,550],{"class":535},[529,2618,553],{"class":535},[529,2620,789],{"class":535},[529,2622,792],{"class":576},[529,2624,795],{"class":535},[529,2626,798],{"class":576},[529,2628,801],{"class":535},[529,2630,2631],{"class":576},"visibleLayers",[529,2633,807],{"class":535},[529,2635,2636,2638,2640,2642,2644,2646],{"class":531,"line":878},[529,2637,813],{"class":535},[529,2639,816],{"class":543},[529,2641,550],{"class":535},[529,2643,553],{"class":535},[529,2645,798],{"class":576},[529,2647,807],{"class":535},[529,2649,2650,2652,2654,2656,2658,2660,2662,2664],{"class":531,"line":906},[529,2651,813],{"class":535},[529,2653,840],{"class":543},[529,2655,550],{"class":535},[529,2657,553],{"class":535},[529,2659,792],{"class":576},[529,2661,849],{"class":535},[529,2663,840],{"class":576},[529,2665,807],{"class":535},[529,2667,2668],{"class":531,"line":917},[529,2669,875],{"class":535},[529,2671,2672,2674,2676,2678,2680,2682,2684,2686,2688,2690],{"class":531,"line":927},[529,2673,881],{"class":535},[529,2675,884],{"class":539},[529,2677,887],{"class":543},[529,2679,550],{"class":535},[529,2681,553],{"class":535},[529,2683,792],{"class":576},[529,2685,849],{"class":535},[529,2687,898],{"class":576},[529,2689,553],{"class":535},[529,2691,903],{"class":535},[529,2693,2694,2696,2698],{"class":531,"line":1891},[529,2695,909],{"class":535},[529,2697,912],{"class":539},[529,2699,562],{"class":535},[529,2701,2702,2704,2706],{"class":531,"line":1900},[529,2703,920],{"class":535},[529,2705,750],{"class":539},[529,2707,562],{"class":535},[529,2709,2710,2712,2714],{"class":531,"line":1909},[529,2711,722],{"class":535},[529,2713,739],{"class":539},[529,2715,562],{"class":535},[1564,2717,2719],{"id":2718},"material-customization-per-layer","Material Customization per Layer",[513,2721,2723],{"className":515,"code":2722,"language":524,"meta":525,"style":525},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\n\nconst { layers } = useSVG('/logo.svg', {\n  fillMaterial: {\n    transparent: true,\n    opacity: 0.9\n  },\n  strokeMaterial: {\n    transparent: true,\n    opacity: 1.0,\n    color: '#000000'\n  }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup>\n    \u003CTresMesh\n      v-for=\"(layer, index) in layers\"\n      :key=\"index\"\n      :geometry=\"layer.geometry\"\n    >\n      \u003CTresMeshBasicMaterial\n        v-bind=\"layer.material\"\n        :wireframe=\"layer.isStroke\"\n      />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n",[487,2724,2725,2745,2763,2767,2794,2802,2813,2823,2828,2837,2847,2858,2871,2876,2882,2890,2894,2902,2910,2916,2938,2952,2970,2974,2980,2996,3016,3021,3030,3039],{"__ignoreMap":525},[529,2726,2727,2729,2731,2733,2735,2737,2739,2741,2743],{"class":531,"line":532},[529,2728,536],{"class":535},[529,2730,540],{"class":539},[529,2732,544],{"class":543},[529,2734,547],{"class":543},[529,2736,550],{"class":535},[529,2738,553],{"class":535},[529,2740,557],{"class":556},[529,2742,553],{"class":535},[529,2744,562],{"class":535},[529,2746,2747,2749,2751,2753,2755,2757,2759,2761],{"class":531,"line":519},[529,2748,570],{"class":569},[529,2750,573],{"class":535},[529,2752,577],{"class":576},[529,2754,580],{"class":535},[529,2756,583],{"class":569},[529,2758,586],{"class":535},[529,2760,589],{"class":556},[529,2762,592],{"class":535},[529,2764,2765],{"class":531,"line":595},[529,2766,599],{"emptyLinePlaceholder":598},[529,2768,2769,2771,2773,2775,2777,2779,2781,2783,2785,2788,2790,2792],{"class":531,"line":602},[529,2770,605],{"class":543},[529,2772,573],{"class":535},[529,2774,1219],{"class":576},[529,2776,646],{"class":535},[529,2778,649],{"class":535},[529,2780,577],{"class":652},[529,2782,789],{"class":576},[529,2784,1230],{"class":535},[529,2786,2787],{"class":556},"/logo.svg",[529,2789,1230],{"class":535},[529,2791,630],{"class":535},[529,2793,660],{"class":535},[529,2795,2796,2798,2800],{"class":531,"line":520},[529,2797,682],{"class":539},[529,2799,669],{"class":535},[529,2801,660],{"class":535},[529,2803,2804,2807,2809,2811],{"class":531,"line":521},[529,2805,2806],{"class":539},"    transparent",[529,2808,669],{"class":535},[529,2810,694],{"class":672},[529,2812,676],{"class":535},[529,2814,2815,2818,2820],{"class":531,"line":522},[529,2816,2817],{"class":539},"    opacity",[529,2819,669],{"class":535},[529,2821,2822],{"class":704}," 0.9\n",[529,2824,2825],{"class":531,"line":523},[529,2826,2827],{"class":535},"  },\n",[529,2829,2830,2833,2835],{"class":531,"line":719},[529,2831,2832],{"class":539},"  strokeMaterial",[529,2834,669],{"class":535},[529,2836,660],{"class":535},[529,2838,2839,2841,2843,2845],{"class":531,"line":729},[529,2840,2806],{"class":539},[529,2842,669],{"class":535},[529,2844,694],{"class":672},[529,2846,676],{"class":535},[529,2848,2849,2851,2853,2856],{"class":531,"line":734},[529,2850,2817],{"class":539},[529,2852,669],{"class":535},[529,2854,2855],{"class":704}," 1.0",[529,2857,676],{"class":535},[529,2859,2860,2863,2865,2867,2869],{"class":531,"line":744},[529,2861,2862],{"class":539},"    color",[529,2864,669],{"class":535},[529,2866,586],{"class":535},[529,2868,1709],{"class":556},[529,2870,592],{"class":535},[529,2872,2873],{"class":531,"line":770},[529,2874,2875],{"class":535},"  }\n",[529,2877,2878,2880],{"class":531,"line":779},[529,2879,646],{"class":535},[529,2881,716],{"class":576},[529,2883,2884,2886,2888],{"class":531,"line":810},[529,2885,722],{"class":535},[529,2887,540],{"class":539},[529,2889,562],{"class":535},[529,2891,2892],{"class":531,"line":835},[529,2893,599],{"emptyLinePlaceholder":598},[529,2895,2896,2898,2900],{"class":531,"line":856},[529,2897,536],{"class":535},[529,2899,739],{"class":539},[529,2901,562],{"class":535},[529,2903,2904,2906,2908],{"class":531,"line":872},[529,2905,747],{"class":535},[529,2907,750],{"class":539},[529,2909,562],{"class":535},[529,2911,2912,2914],{"class":531,"line":878},[529,2913,773],{"class":535},[529,2915,776],{"class":539},[529,2917,2918,2920,2922,2924,2926,2928,2930,2932,2934,2936],{"class":531,"line":906},[529,2919,782],{"class":569},[529,2921,550],{"class":535},[529,2923,553],{"class":535},[529,2925,789],{"class":535},[529,2927,792],{"class":576},[529,2929,795],{"class":535},[529,2931,798],{"class":576},[529,2933,801],{"class":535},[529,2935,804],{"class":576},[529,2937,807],{"class":535},[529,2939,2940,2942,2944,2946,2948,2950],{"class":531,"line":917},[529,2941,813],{"class":535},[529,2943,816],{"class":543},[529,2945,550],{"class":535},[529,2947,553],{"class":535},[529,2949,798],{"class":576},[529,2951,807],{"class":535},[529,2953,2954,2956,2958,2960,2962,2964,2966,2968],{"class":531,"line":927},[529,2955,813],{"class":535},[529,2957,840],{"class":543},[529,2959,550],{"class":535},[529,2961,553],{"class":535},[529,2963,792],{"class":576},[529,2965,849],{"class":535},[529,2967,840],{"class":576},[529,2969,807],{"class":535},[529,2971,2972],{"class":531,"line":1891},[529,2973,875],{"class":535},[529,2975,2976,2978],{"class":531,"line":1900},[529,2977,881],{"class":535},[529,2979,1839],{"class":539},[529,2981,2982,2984,2986,2988,2990,2992,2994],{"class":531,"line":1909},[529,2983,1844],{"class":543},[529,2985,550],{"class":535},[529,2987,553],{"class":535},[529,2989,792],{"class":576},[529,2991,849],{"class":535},[529,2993,898],{"class":576},[529,2995,807],{"class":535},[529,2997,2999,3001,3004,3006,3008,3010,3012,3014],{"class":531,"line":2998},26,[529,3000,1861],{"class":535},[529,3002,3003],{"class":543},"wireframe",[529,3005,550],{"class":535},[529,3007,553],{"class":535},[529,3009,792],{"class":576},[529,3011,849],{"class":535},[529,3013,1701],{"class":576},[529,3015,807],{"class":535},[529,3017,3019],{"class":531,"line":3018},27,[529,3020,1888],{"class":535},[529,3022,3024,3026,3028],{"class":531,"line":3023},28,[529,3025,909],{"class":535},[529,3027,912],{"class":539},[529,3029,562],{"class":535},[529,3031,3033,3035,3037],{"class":531,"line":3032},29,[529,3034,920],{"class":535},[529,3036,750],{"class":539},[529,3038,562],{"class":535},[529,3040,3042,3044,3046],{"class":531,"line":3041},30,[529,3043,722],{"class":535},[529,3045,739],{"class":539},[529,3047,562],{"class":535},[495,3049,3051],{"id":3050},"usesvg-component","UseSVG Component",[478,3053,3054,3055,3058],{},"For simple, declarative SVG rendering without the need for programmatic control, you can use the ",[487,3056,3057],{},"UseSVG"," component:",[513,3060,3062],{"className":515,"code":3061,"language":524,"meta":525,"style":525},"\u003Cscript setup lang=\"ts\">\nimport { UseSVG } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup :scale=\"0.01\" :position=\"[-2.1, 1, 0]\">\n    \u003CUseSVG\n      src=\"/path/to/logo.svg\"\n      :skip-fills=\"false\"\n      :fill-material=\"{ transparent: true,\n                        opacity: 0.8 }\"\n      depth=\"renderOrder\"\n    />\n  \u003C/TresGroup>\n\u003C/template>\n",[487,3063,3064,3084,3103,3111,3115,3123,3172,3179,3193,3208,3232,3246,3259,3264,3272],{"__ignoreMap":525},[529,3065,3066,3068,3070,3072,3074,3076,3078,3080,3082],{"class":531,"line":532},[529,3067,536],{"class":535},[529,3069,540],{"class":539},[529,3071,544],{"class":543},[529,3073,547],{"class":543},[529,3075,550],{"class":535},[529,3077,553],{"class":535},[529,3079,557],{"class":556},[529,3081,553],{"class":535},[529,3083,562],{"class":535},[529,3085,3086,3088,3090,3093,3095,3097,3099,3101],{"class":531,"line":519},[529,3087,570],{"class":569},[529,3089,573],{"class":535},[529,3091,3092],{"class":576}," UseSVG",[529,3094,580],{"class":535},[529,3096,583],{"class":569},[529,3098,586],{"class":535},[529,3100,589],{"class":556},[529,3102,592],{"class":535},[529,3104,3105,3107,3109],{"class":531,"line":595},[529,3106,722],{"class":535},[529,3108,540],{"class":539},[529,3110,562],{"class":535},[529,3112,3113],{"class":531,"line":602},[529,3114,599],{"emptyLinePlaceholder":598},[529,3116,3117,3119,3121],{"class":531,"line":520},[529,3118,536],{"class":535},[529,3120,739],{"class":539},[529,3122,562],{"class":535},[529,3124,3125,3127,3129,3131,3134,3136,3138,3141,3143,3145,3147,3149,3151,3154,3157,3159,3162,3164,3166,3168,3170],{"class":531,"line":521},[529,3126,747],{"class":535},[529,3128,750],{"class":539},[529,3130,1066],{"class":535},[529,3132,3133],{"class":543},"scale",[529,3135,550],{"class":535},[529,3137,553],{"class":535},[529,3139,3140],{"class":704},"0.01",[529,3142,553],{"class":535},[529,3144,1066],{"class":535},[529,3146,1069],{"class":543},[529,3148,550],{"class":535},[529,3150,553],{"class":535},[529,3152,3153],{"class":535},"[-",[529,3155,3156],{"class":704},"2.1",[529,3158,795],{"class":535},[529,3160,3161],{"class":704},"1",[529,3163,795],{"class":535},[529,3165,1079],{"class":704},[529,3167,1092],{"class":535},[529,3169,553],{"class":535},[529,3171,562],{"class":535},[529,3173,3174,3176],{"class":531,"line":522},[529,3175,773],{"class":535},[529,3177,3178],{"class":539},"UseSVG\n",[529,3180,3181,3184,3186,3188,3191],{"class":531,"line":523},[529,3182,3183],{"class":543},"      src",[529,3185,550],{"class":535},[529,3187,553],{"class":535},[529,3189,3190],{"class":556},"/path/to/logo.svg",[529,3192,807],{"class":535},[529,3194,3195,3197,3200,3202,3204,3206],{"class":531,"line":719},[529,3196,813],{"class":535},[529,3198,3199],{"class":543},"skip-fills",[529,3201,550],{"class":535},[529,3203,553],{"class":535},[529,3205,1414],{"class":672},[529,3207,807],{"class":535},[529,3209,3210,3212,3215,3217,3219,3222,3225,3228,3230],{"class":531,"line":729},[529,3211,813],{"class":535},[529,3213,3214],{"class":543},"fill-material",[529,3216,550],{"class":535},[529,3218,553],{"class":535},[529,3220,3221],{"class":535},"{ ",[529,3223,3224],{"class":539},"transparent",[529,3226,3227],{"class":535},": ",[529,3229,2469],{"class":672},[529,3231,676],{"class":535},[529,3233,3234,3237,3239,3242,3244],{"class":531,"line":734},[529,3235,3236],{"class":539},"                        opacity",[529,3238,3227],{"class":535},[529,3240,3241],{"class":704},"0.8",[529,3243,580],{"class":535},[529,3245,807],{"class":535},[529,3247,3248,3251,3253,3255,3257],{"class":531,"line":744},[529,3249,3250],{"class":543},"      depth",[529,3252,550],{"class":535},[529,3254,553],{"class":535},[529,3256,1960],{"class":556},[529,3258,807],{"class":535},[529,3260,3261],{"class":531,"line":770},[529,3262,3263],{"class":535},"    />\n",[529,3265,3266,3268,3270],{"class":531,"line":779},[529,3267,920],{"class":535},[529,3269,750],{"class":539},[529,3271,562],{"class":535},[529,3273,3274,3276,3278],{"class":531,"line":810},[529,3275,722],{"class":535},[529,3277,739],{"class":539},[529,3279,562],{"class":535},[506,3281,3283],{"id":3282},"props","Props",[1297,3285,3286,3299],{},[1300,3287,3288],{},[1303,3289,3290,3293,3295,3297],{},[1306,3291,3292],{"align":1308},"Prop",[1306,3294,1312],{},[1306,3296,1315],{"align":1308},[1306,3298,1394],{},[1317,3300,3301,3323,3343,3362,3380,3397,3416,3434],{},[1303,3302,3303,3308,3313,3321],{},[1322,3304,3305],{"align":1308},[482,3306,3307],{},"src",[1322,3309,3310],{},[487,3311,3312],{},"string",[1322,3314,3315,3316,3320],{"align":1308},"Either a path to an SVG ",[3317,3318,3319],"em",{},"or"," an SVG string",[1322,3322],{},[1303,3324,3325,3329,3333,3339],{},[1322,3326,3327],{"align":1308},[482,3328,1405],{},[1322,3330,3331],{},[487,3332,1359],{},[1322,3334,3335,3336,3338],{"align":1308},"If ",[487,3337,2469],{},", the SVG strokes will not be rendered.",[1322,3340,3341],{},[487,3342,1414],{},[1303,3344,3345,3349,3353,3358],{},[1322,3346,3347],{"align":1308},[482,3348,1424],{},[1322,3350,3351],{},[487,3352,1359],{},[1322,3354,3335,3355,3357],{"align":1308},[487,3356,2469],{},", the SVG fills will not be rendered.",[1322,3359,3360],{},[487,3361,1414],{},[1303,3363,3364,3368,3372,3375],{},[1322,3365,3366],{"align":1308},[482,3367,1462],{},[1322,3369,3370],{},[487,3371,1447],{},[1322,3373,3374],{"align":1308},"Props to assign to the stroke materials of the resulting meshes.",[1322,3376,3377],{},[487,3378,3379],{},"undefined",[1303,3381,3382,3386,3390,3393],{},[1322,3383,3384],{"align":1308},[482,3385,1442],{},[1322,3387,3388],{},[487,3389,1447],{},[1322,3391,3392],{"align":1308},"Props to assign to the fill materials of the resulting meshes.",[1322,3394,3395],{},[487,3396,3379],{},[1303,3398,3399,3404,3409,3412],{},[1322,3400,3401],{"align":1308},[482,3402,3403],{},"strokeMeshProps",[1322,3405,3406],{},[487,3407,3408],{},"TresOptions",[1322,3410,3411],{"align":1308},"Props to assign to the resulting stroke meshes.",[1322,3413,3414],{},[487,3415,3379],{},[1303,3417,3418,3423,3427,3430],{},[1322,3419,3420],{"align":1308},[482,3421,3422],{},"fillMeshProps",[1322,3424,3425],{},[487,3426,3408],{},[1322,3428,3429],{"align":1308},"Props to assign to the resulting fill meshes.",[1322,3431,3432],{},[487,3433,3379],{},[1303,3435,3436,3440,3444,3451],{},[1322,3437,3438],{"align":1308},[482,3439,1480],{},[1322,3441,3442],{},[487,3443,1485],{},[1322,3445,3446,3447,1683],{"align":1308},"Specify how SVG layers are to be rendered. (",[1953,3448,3450],{"href":3449},"#depth-handling","See \"Depth\"",[1322,3452,3453],{},[487,3454,1960],{},[495,3456,3458],{"id":3457},"troubleshooting","Troubleshooting",[3460,3461,3463],"alert",{"type":3462},"warning",[478,3464,3465],{},"This is not a general-purpose SVG renderer. Many SVG features are unsupported.",[478,3467,3468],{},"Here are some things to try if you run into problems:",[506,3470,3472],{"id":3471},"error-xml-parsing-error-unclosed-token","Error: \"XML Parsing Error: unclosed token\"",[1155,3474,3475],{},[1158,3476,3477,3478,1948,3481,849],{},"In the SVG source, convert hex colors to rgb, e.g., convert ",[487,3479,3480],{},"#ff0000",[487,3482,3483],{},"rgb(255, 0, 0)",[506,3485,3487],{"id":3486},"parts-of-the-svg-render-in-the-wrong-order-or-disappear-depending-on-viewing-angle","Parts of the SVG render in the wrong order or disappear, depending on viewing angle",[1155,3489,3490,3502],{},[1158,3491,3492,3493,3495,3496,849],{},"In your ",[487,3494,141],{}," options, ",[1953,3497,3498,3499,3501],{"href":3449},"change the ",[487,3500,1480],{}," option",[1158,3503,3504,3505,3508,3509,849],{},"In the SVG source, use ",[487,3506,3507],{},"fill=\"none\""," rather than ",[487,3510,3511],{},"fill-opacity=\"0\"",[506,3513,3515,3516],{"id":3514},"parts-of-the-svg-z-fight","Parts of the SVG ",[1953,3517,3519],{"href":2124,"rel":3518},[1957],"\"z-fight\"",[1155,3521,3522,3530],{},[1158,3523,3492,3524,3495,3526,849],{},[487,3525,141],{},[1953,3527,3498,3528,3501],{"href":3449},[487,3529,1480],{},[1158,3531,3532],{},"Increase the distance between the SVG and other on-screen elements.",[506,3534,3536],{"id":3535},"the-svg-is-not-visible","The SVG is not visible",[1155,3538,3539,3542,3551,3557],{},[1158,3540,3541],{},"If importing an SVG, make sure the path is correct – check the console for loading errors.",[1158,3543,3544,3545,3547,3548,849],{},"Try scaling the SVG down, e.g., wrap it in a ",[487,3546,750],{}," with ",[487,3549,3550],{},":scale=\"0.01\"",[1158,3552,3553,3554,849],{},"Try moving the SVG up (+y), e.g., ",[487,3555,3556],{},":position=\"[0,2,0]\"",[1158,3558,3559,3560,3563],{},"Check that ",[487,3561,3562],{},"layers.length > 0"," before rendering.",[506,3565,3567],{"id":3566},"performance-issues-with-many-layers","Performance issues with many layers",[1155,3569,3570,3577,3586],{},[1158,3571,3572,3573,3576],{},"Use the ",[487,3574,3575],{},"dispose()"," function when components unmount to clean up geometries.",[1158,3578,3579,3580,3582,3583,3585],{},"Consider using ",[487,3581,1405],{}," or ",[487,3584,1424],{}," to reduce the number of rendered layers.",[1158,3587,3588],{},"For complex SVGs with many layers, consider simplifying the SVG source.",[495,3590,3592,3593,3595,3596,3598],{"id":3591},"when-to-use-usesvg-vs-svg-component","When to Use ",[487,3594,141],{}," vs ",[487,3597,492],{}," Component",[478,3600,3601],{},[482,3602,3603,3604,3606],{},"Use ",[487,3605,141],{}," when you need:",[1155,3608,3609,3612,3615,3618,3621],{},[1158,3610,3611],{},"Direct access to individual SVG layers",[1158,3613,3614],{},"Custom rendering logic",[1158,3616,3617],{},"Layer-specific animations",[1158,3619,3620],{},"Programmatic geometry manipulation",[1158,3622,3623],{},"Advanced material customization per layer",[478,3625,3626],{},[482,3627,3572,3628,3630],{},[487,3629,492],{}," component when you need:",[1155,3632,3633,3636,3639,3642],{},[1158,3634,3635],{},"Simple, declarative SVG rendering",[1158,3637,3638],{},"Quick prototyping",[1158,3640,3641],{},"Standard SVG display without custom logic",[1158,3643,3644],{},"Less code and setup",[3646,3647,3648],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":525,"searchDepth":532,"depth":519,"links":3650},[3651,3661,3664,3672],{"id":497,"depth":519,"text":498,"children":3652},[3653,3654,3655,3656,3657,3658,3659,3660],{"id":508,"depth":595,"text":15},{"id":1172,"depth":595,"text":1173},{"id":1294,"depth":595,"text":1295},{"id":1380,"depth":595,"text":1381},{"id":1496,"depth":595,"text":1497},{"id":1918,"depth":595,"text":1919},{"id":2244,"depth":595,"text":2245},{"id":2381,"depth":595,"text":2382},{"id":3050,"depth":519,"text":3051,"children":3662},[3663],{"id":3282,"depth":595,"text":3283},{"id":3457,"depth":519,"text":3458,"children":3665},[3666,3667,3668,3670,3671],{"id":3471,"depth":595,"text":3472},{"id":3486,"depth":595,"text":3487},{"id":3514,"depth":595,"text":3669},"Parts of the SVG \"z-fight\"",{"id":3535,"depth":595,"text":3536},{"id":3566,"depth":595,"text":3567},{"id":3591,"depth":519,"text":3673},"When to Use useSVG vs SVG Component","A composable to load and render SVG files as 3D geometry in TresJS scenes.","md",null,{},{"title":141,"description":3674},"Bpey5SMrTLv2yytWL0t_9C4cqa_4Vc__F5o4YEN3jZA",[3681,3683],{"title":137,"path":138,"stem":139,"description":3682,"children":-1},"A composable to load multiple textures efficiently in TresJS scenes.",{"title":145,"path":146,"stem":147,"description":3684,"children":-1},"A composable to track loading progress of assets in TresJS scenes.",1774953655441]