{"id":12531,"date":"2025-04-02T10:28:03","date_gmt":"2025-04-02T10:28:03","guid":{"rendered":"https:\/\/docs.zozothemes.com\/cea\/?p=12531"},"modified":"2025-04-24T04:47:05","modified_gmt":"2025-04-24T04:47:05","slug":"draw-svg","status":"publish","type":"post","link":"https:\/\/docs.zozothemes.com\/cea\/draw-svg\/","title":{"rendered":"Draw SVG"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"12531\" class=\"elementor elementor-12531\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-88fdc60 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"88fdc60\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f523025\" data-id=\"f523025\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e03cc33 elementor-widget elementor-widget-text-editor\" data-id=\"e03cc33\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This shortcode For to Add the Draw SVG.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ace83d7 elementor-widget elementor-widget-video\" data-id=\"ace83d7\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;loop&quot;:&quot;yes&quot;,&quot;show_image_overlay&quot;:&quot;yes&quot;,&quot;image_overlay&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/docs.zozothemes.com\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/banner-new.png&quot;,&quot;id&quot;:10220,&quot;size&quot;:&quot;&quot;},&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/08\/draw-svg.mp4\" loop=\"\" controls=\"\" preload=\"metadata\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t\t\t<div class=\"elementor-custom-embed-image-overlay\" style=\"background-image: url(https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2021\/03\/banner-new-1.png);\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-custom-embed-play\" role=\"button\" aria-label=\"Play Video\" tabindex=\"0\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"eicon-play\"><\/i>\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a14ec28 cea-btn-align-center elementor-widget elementor-widget-ceabutton\" data-id=\"a14ec28\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ceabutton.default\">\n\t\t\t\t<div class=\"elementor-widget-container cea-button-wrapper\">\n\t\t\t\t\t<div class=\"cea-button-wrapper\">\n\t\t\t<a href=\"https:\/\/cea.zozothemes.com\/draw-svg\/\" class=\"cea-button-link elementor-button cea-button elementor-size-lg elementor-animation-grow\">\n\t\t\t\t\t\t<span class=\"cea-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"cea-button-icon cea-align-icon-right\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"ti ti-share\"><\/i>\t\t\t<\/span>\n\t\t\t\t\t\t<span class=\"cea-button-text\">Demo Link<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-3c04d2e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3c04d2e\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-0f8cbb3\" data-id=\"0f8cbb3\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-85d8776 elementor-widget elementor-widget-image\" data-id=\"85d8776\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"417\" height=\"730\" src=\"https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2025\/04\/draw-svg_general.png\" class=\"attachment-full size-full wp-image-12533\" alt=\"\" srcset=\"https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2025\/04\/draw-svg_general.png 417w, https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2025\/04\/draw-svg_general-171x300.png 171w\" sizes=\"(max-width: 417px) 100vw, 417px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dc35a9b elementor-widget elementor-widget-image\" data-id=\"dc35a9b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"416\" height=\"534\" src=\"https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2025\/04\/draw-svg_animation.png\" class=\"attachment-full size-full wp-image-12535\" alt=\"\" srcset=\"https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2025\/04\/draw-svg_animation.png 416w, https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2025\/04\/draw-svg_animation-234x300.png 234w\" sizes=\"(max-width: 416px) 100vw, 416px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-aa840a4\" data-id=\"aa840a4\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-db5345e elementor-widget elementor-widget-image\" data-id=\"db5345e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"296\" height=\"814\" src=\"https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2025\/04\/draw-svg_style.png\" class=\"attachment-full size-full wp-image-12534\" alt=\"\" srcset=\"https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2025\/04\/draw-svg_style.png 296w, https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2025\/04\/draw-svg_style-109x300.png 109w\" sizes=\"(max-width: 296px) 100vw, 296px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-2384aea elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"2384aea\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4 style=\"text-decoration-line: underline;\">General<\/h4><div style=\"color: #515151; font-family: Roboto, sans-serif; font-size: 16px;\"><ul><li><span style=\"font-weight: bolder; color: #333333; font-family: var( --e-global-typography-text-font-family ), Sans-serif;\">Source &#8211; <\/span><span style=\"font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight );\">Here you can select the source of svg.<\/span><\/li><li><span style=\"font-weight: bolder; color: #333333;\">Icon &#8211; <\/span>\u00a0Here you can upload icons from Elementor.<\/li><li><span style=\"font-weight: bolder; color: #333333;\">Width &#8211; <\/span>\u00a0Here you can set the width for the SVG icon.<\/li><li><span style=\"font-weight: bolder; color: #333333;\">Alignment\u00a0 &#8211;<\/span> Here you can set the positioning of SVG icon relative to the container.<\/li><\/ul><\/div><h4 style=\"text-decoration: underline;\">Animation<\/h4><ul><li style=\"list-style-type: none;\"><ul><li><span style=\"font-weight: bolder; color: #333333;\">Animation &#8211; <\/span>\u00a0Here you can select the Animation type. For example ( On Hover, On Scroll, etc.)<\/li><li><span style=\"font-weight: bolder; color: #333333;\">Animation Duration &#8211; <\/span>\u00a0Here you can set the duration for the Animation.<\/li><li><span style=\"font-weight: bolder; color: #333333;\">Animation Delay &#8211; <\/span>Here you can set the time to wait before the animation starts.<\/li><li><span style=\"font-weight: bolder; color: #333333;\">Animation Timing Function &#8211; <\/span>Here you can select the timing function like ease-in, ease-out, linear.<\/li><li><span style=\"font-weight: bolder; color: #333333;\">Repeat Drawing &#8211;<\/span> Select &#8216;yes&#8217; if the animation has to repeat infinitely.<\/li><li><span style=\"font-weight: bolder; color: #333333;\">Box Shadow &#8211;\u00a0<\/span>Here you can apply a shadow effect to the element\u2019s box for a 3D look.<\/li><li><span style=\"font-weight: bolder; color: #333333;\">Typography &#8211;\u00a0<\/span>Here you can customize the style, size, and arrangement of the text.<\/li><\/ul><\/li><\/ul><h4 style=\"text-decoration: underline;\">Styles<\/h4><ul><li><span style=\"font-weight: bolder; color: #333333;\">Margin &#8211; <\/span>Here you can set the outer space of the element from it&#8217;s border.<\/li><li><span style=\"font-weight: bolder; color: #333333;\">Padding\u00a0 &#8211; <\/span>Here you can set the space between the element\u2019s content and its border.<\/li><li><span style=\"font-weight: bolder; color: #333333;\">Background Color &#8211; <\/span>Here you can set the background color for the SVG icon.<\/li><li><span style=\"font-weight: bolder; color: #333333;\">Stroke Color\u00a0 &#8211; <\/span>Here you can set the color for the icon.<\/li><li><span style=\"font-weight: bolder; color: #333333;\">Stroke Width\u00a0 &#8211; <\/span>Here you can set the thickness of the icon.<\/li><li><span style=\"font-weight: bolder; color: #333333;\">Fill\u00a0 &#8211;<\/span> Enable to add fill color to the SVG icon.<\/li><li><span style=\"font-weight: bolder; color: #333333;\">Fill Color\u00a0 &#8211;<\/span> Here you can set the color to fill the SVG icon.<\/li><li><span style=\"font-weight: bolder; color: #333333;\">Border Display\u00a0 &#8211;<\/span> Enable to display border for the SVG icon container.<\/li><li><span style=\"font-weight: bolder; color: #333333;\">Border Style\u00a0 &#8211;<\/span> Here you can select the border styles like double, dotted, etc.<\/li><li><span style=\"font-weight: bolder; color: #333333;\">Border Radius\u00a0 &#8211;<\/span> Here you can increase the roundness of the SVG icon container.<\/li><li><span style=\"font-weight: bolder; color: #333333;\">Border Color\u00a0 &#8211;<\/span> Here you can set the color for the Border.<\/li><li><span style=\"font-weight: bolder; color: #333333;\">Border Width\u00a0 &#8211;<\/span> Here you can set the Width for the Border.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>This shortcode For to Add the Draw SVG.https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/08\/draw-svg.mp4 Demo Link GeneralSource &#8211; Here you can select the source of svg.Icon &#8211; \u00a0Here you can upload icons from Elementor.Width &#8211; \u00a0Here you can set the width for the SVG icon.Alignment\u00a0 &#8211; Here you can set the positioning of SVG icon relative to the container.AnimationAnimation &#8211; \u00a0Here [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2312,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-12531","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-shortcode"],"_links":{"self":[{"href":"https:\/\/docs.zozothemes.com\/cea\/wp-json\/wp\/v2\/posts\/12531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.zozothemes.com\/cea\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.zozothemes.com\/cea\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.zozothemes.com\/cea\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.zozothemes.com\/cea\/wp-json\/wp\/v2\/comments?post=12531"}],"version-history":[{"count":10,"href":"https:\/\/docs.zozothemes.com\/cea\/wp-json\/wp\/v2\/posts\/12531\/revisions"}],"predecessor-version":[{"id":12776,"href":"https:\/\/docs.zozothemes.com\/cea\/wp-json\/wp\/v2\/posts\/12531\/revisions\/12776"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/docs.zozothemes.com\/cea\/wp-json\/wp\/v2\/media\/2312"}],"wp:attachment":[{"href":"https:\/\/docs.zozothemes.com\/cea\/wp-json\/wp\/v2\/media?parent=12531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.zozothemes.com\/cea\/wp-json\/wp\/v2\/categories?post=12531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.zozothemes.com\/cea\/wp-json\/wp\/v2\/tags?post=12531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}