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