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