{"id":9278,"date":"2025-12-04T12:54:05","date_gmt":"2025-12-04T12:54:05","guid":{"rendered":"https:\/\/hawlatech.com\/toolbuddy\/?page_id=9278"},"modified":"2025-12-08T17:21:28","modified_gmt":"2025-12-08T17:21:28","slug":"svg-code-to-png","status":"publish","type":"page","link":"https:\/\/hawlatech.com\/toolbuddy\/svg-code-to-png\/","title":{"rendered":"SVG Code To PNG"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9278\" class=\"elementor elementor-9278\">\n\t\t\t\t<div class=\"elementor-element elementor-element-59f32a0 e-con-full e-flex e-con e-parent\" data-id=\"59f32a0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5d1f275 elementor-widget elementor-widget-tp-svg-png-converter\" data-id=\"5d1f275\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tp-svg-png-converter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t            <div class=\"svg-png-tool ele-section\">\r\n                <div class=\"row g-4\">\r\n                    <div class=\"col-lg-6\">\r\n                        <!-- SVG Editor Card -->\r\n                        <div class=\"card shadow-sm\">\r\n                            <div class=\"card-body\">\r\n                                                                    <label class=\"form-label\">SVG Code<\/label>\r\n                                                                <textarea \r\n                                    id=\"svgEditor\" \r\n                                    class=\"form-control editor\" \r\n                                    spellcheck=\"false\"\r\n                                    placeholder=\"Paste your SVG code here...\"\r\n                                ><\/textarea>\r\n                                <div class=\"d-flex gap-2 mt-2\">\r\n                                    <input id=\"fileInput\" type=\"file\" accept=\"image\/svg+xml\" class=\"form-control form-control-sm\" \/>\r\n                                    <button id=\"loadSample\" class=\"btn btn-sm btn-outline-primary btn-icon\">\r\n                                        <i class=\"fa-light fa-file-arrow-up\"><\/i>\r\n                                        Sample                                    <\/button>\r\n                                    <button id=\"applyCode\" class=\"btn btn-sm btn-primary btn-icon ms-auto\">\r\n                                        <i class=\"fa-solid fa-play\"><\/i>\r\n                                        Apply                                    <\/button>\r\n                                <\/div>\r\n                                <div class=\"mt-3 d-flex gap-2\">\r\n                                    <button id=\"downloadSvg\" class=\"btn btn-outline-secondary btn-sm\">\r\n                                        <i class=\"fa-thin fa-file-arrow-down\"><\/i>\r\n                                        Download SVG                                    <\/button>\r\n                                    <button id=\"copySvg\" class=\"btn btn-outline-secondary btn-sm\">\r\n                                        <i class=\"fa-regular fa-copy\"><\/i>\r\n                                        Copy SVG                                    <\/button>\r\n                                    <button id=\"clearEditor\" class=\"btn btn-outline-danger btn-sm ms-auto\">\r\n                                        <i class=\"fa-regular fa-trash-can\"><\/i>\r\n                                        Clear                                    <\/button>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <!-- Export Options Card -->\r\n                        <div class=\"card mt-3 shadow-sm\">\r\n                            <div class=\"card-body\">\r\n                                                                    <h6>Export Options<\/h6>\r\n                                                                <div class=\"row g-2 align-items-center\">\r\n                                    <!-- Width -->\r\n                                    <div class=\"col-6 col-md-4\">\r\n                                                                                    <label class=\"form-label\">Width (px)<\/label>\r\n                                                                                <input \r\n                                            id=\"exportWidth\" \r\n                                            type=\"number\" \r\n                                            class=\"form-control form-control-sm\" \r\n                                            min=\"1\" \r\n                                            value=\"800\"\r\n                                        >\r\n                                    <\/div>\r\n                                    \r\n                                    <!-- Height -->\r\n                                    <div class=\"col-6 col-md-4\">\r\n                                                                                    <label class=\"form-label\">Height (px)<\/label>\r\n                                                                                <input \r\n                                            id=\"exportHeight\" \r\n                                            type=\"number\" \r\n                                            class=\"form-control form-control-sm\" \r\n                                            min=\"1\" \r\n                                            value=\"600\"\r\n                                        >\r\n                                    <\/div>\r\n                                    \r\n                                    <!-- Scale -->\r\n                                    <div class=\"col-6 col-md-4\">\r\n                                                                                    <label class=\"form-label\">Scale (\u00d7)<\/label>\r\n                                                                                <input \r\n                                            id=\"exportScale\" \r\n                                            type=\"number\" \r\n                                            class=\"form-control form-control-sm\" \r\n                                            min=\"1\" \r\n                                            value=\"1\"\r\n                                        >\r\n                                    <\/div>\r\n\r\n                                    <!-- Padding -->\r\n                                    <div class=\"col-6 col-md-4\">\r\n                                                                                    <label class=\"form-label\">Padding (px)<\/label>\r\n                                                                                <input \r\n                                            id=\"exportPadding\" \r\n                                            type=\"number\" \r\n                                            class=\"form-control form-control-sm\" \r\n                                            min=\"0\" \r\n                                            value=\"0\"\r\n                                        >\r\n                                    <\/div>\r\n                                    \r\n                                    <!-- Background Color -->\r\n                                    <div class=\"col-6 col-md-4\">\r\n                                                                                    <label class=\"form-label\">Background<\/label>\r\n                                                                                <input \r\n                                            id=\"bgColor\" \r\n                                            type=\"color\" \r\n                                            class=\"form-control form-control-sm\" \r\n                                            value=\"#ffffff\"\r\n                                        >\r\n                                    <\/div>\r\n                                    \r\n                                    <!-- Transparent Background -->\r\n                                    <div class=\"col-6 col-md-4 d-flex flex-column\">\r\n                                        <label class=\"form-label\">Transparent<\/label>\r\n                                        <div class=\"form-check form-switch\">\r\n                                            <input class=\"form-check-input\" type=\"checkbox\" id=\"transparentBg\">\r\n                                            <label class=\"form-check-label small\" for=\"transparentBg\">\r\n                                                Make background transparent                                            <\/label>\r\n                                        <\/div>\r\n                                    <\/div>\r\n\r\n                                    <!-- Export Buttons -->\r\n                                    <div class=\"col-12 mt-2\">\r\n                                        <div class=\"d-flex gap-2\">\r\n                                            <button id=\"exportPng\" class=\"btn btn-success btn-icon\">\r\n                                                <i class=\"bi bi-download\"><\/i>\r\n                                                Export PNG                                            <\/button>\r\n                                            <button id=\"exportPngOpen\" class=\"btn btn-outline-success btn-icon\">\r\n                                                <i class=\"bi bi-box-arrow-up-right\"><\/i>\r\n                                                Open PNG                                            <\/button>\r\n                                            <button id=\"previewPng\" class=\"btn btn-outline-primary btn-icon\">\r\n                                                <i class=\"bi bi-image\"><\/i>\r\n                                                Preview Raster                                            <\/button>\r\n                                            <div class=\"ms-auto\">\r\n                                                <span class=\"badge badge-dim p-2\">\r\n                                                    Preview size: \r\n                                                    <span id=\"previewSize\">\r\n                                                        800\u00d7600                                                    <\/span>\r\n                                                <\/span>\r\n                                            <\/div>\r\n                                        <\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Right Column -->\r\n                    <div class=\"col-lg-6\">\r\n                        <!-- Preview Card -->\r\n                        <div class=\"card shadow-sm\">\r\n                            <div class=\"card-body\">\r\n                                <div class=\"d-flex mb-2\">\r\n                                                                            <h6 class=\"me-auto\">Live Preview<\/h6>\r\n                                                                                                                <div class=\"small-note\">Click an element to inspect\/edit<\/div>\r\n                                                                    <\/div>\r\n                                <div id=\"preview\" class=\"preview-box\" tabindex=\"0\">\r\n                                    <!-- SVG will be injected here -->\r\n                                    <div class=\"text-center small-note\">\r\n                                        No SVG loaded \u2014 paste code and click Apply                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <!-- Inspector Card -->\r\n                        <div class=\"card mt-3 shadow-sm\">\r\n                            <div class=\"card-body inspector\">\r\n                                                                    <h6>Element Inspector<\/h6>\r\n                                                                <div id=\"inspectorEmpty\" class=\"small-note\">\r\n                                    Select an element in the preview to edit its attributes (fill, stroke, opacity, transform)                                <\/div>\r\n                                <div id=\"inspector\" style=\"display:none\">\r\n                                    <!-- Tag -->\r\n                                    <div class=\"mb-2\">\r\n                                                                                    <label class=\"form-label\">\r\n                                                Tag: \r\n                                                <span id=\"insTag\" class=\"fw-bold\"><\/span>\r\n                                            <\/label>\r\n                                                                            <\/div>\r\n                                    \r\n                                    <!-- Attributes -->\r\n                                    <div class=\"row g-2\">\r\n                                        <!-- Fill -->\r\n                                        <div class=\"col-6\">\r\n                                                                                            <label class=\"form-label\">Fill<\/label>\r\n                                                                                        <input \r\n                                                id=\"attrFill\" \r\n                                                class=\"form-control form-control-sm\" \r\n                                                placeholder=\"#000 or none\"\r\n                                            >\r\n                                        <\/div>\r\n                                        \r\n                                        <!-- Stroke -->\r\n                                        <div class=\"col-6\">\r\n                                                                                            <label class=\"form-label\">Stroke<\/label>\r\n                                                                                        <input \r\n                                                id=\"attrStroke\" \r\n                                                class=\"form-control form-control-sm\" \r\n                                                placeholder=\"#000 or none\"\r\n                                            >\r\n                                        <\/div>\r\n                                        \r\n                                        <!-- Stroke Width -->\r\n                                        <div class=\"col-6\">\r\n                                                                                            <label class=\"form-label\">Stroke Width<\/label>\r\n                                                                                        <input \r\n                                                id=\"attrStrokeWidth\" \r\n                                                class=\"form-control form-control-sm\" \r\n                                                placeholder=\"1\"\r\n                                            >\r\n                                        <\/div>\r\n                                        \r\n                                        <!-- Opacity -->\r\n                                        <div class=\"col-6\">\r\n                                                                                            <label class=\"form-label\">Opacity<\/label>\r\n                                                                                        <input \r\n                                                id=\"attrOpacity\" \r\n                                                class=\"form-control form-control-sm\" \r\n                                                placeholder=\"0-1\"\r\n                                            >\r\n                                        <\/div>\r\n                                        \r\n                                        <!-- Transform -->\r\n                                        <div class=\"col-12\">\r\n                                                                                            <label class=\"form-label\">Transform<\/label>\r\n                                                                                        <input \r\n                                                id=\"attrTransform\" \r\n                                                class=\"form-control form-control-sm\" \r\n                                                placeholder=\"translate(10,10)\"\r\n                                            >\r\n                                        <\/div>\r\n                                    <\/div>\r\n                                    \r\n                                    <!-- Inspector Buttons -->\r\n                                    <div class=\"d-flex gap-2 mt-2\">\r\n                                                                                    <button id=\"applyAttr\" class=\"btn btn-sm btn-primary\">\r\n                                                Apply                                            <\/button>\r\n                                                                                \r\n                                                                                    <button id=\"resetAttr\" class=\"btn btn-sm btn-secondary\">\r\n                                                Reset                                            <\/button>\r\n                                                                                \r\n                                                                                    <button id=\"deselect\" class=\"btn btn-sm btn-outline-danger ms-auto\">\r\n                                                <i class=\"bi bi-x\"><\/i>\r\n                                                Deselect                                            <\/button>\r\n                                                                            <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SVG Code Sample Apply Download SVG Copy SVG Clear Export Options Width (px) Height (px) Scale (\u00d7) Padding (px) Background Transparent Make background transparent Export PNG Open PNG Preview Raster Preview size: 800\u00d7600 Live Preview Click an element to inspect\/edit No SVG loaded \u2014 paste code and click Apply Element Inspector Select an element in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-9278","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/hawlatech.com\/toolbuddy\/wp-json\/wp\/v2\/pages\/9278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hawlatech.com\/toolbuddy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hawlatech.com\/toolbuddy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hawlatech.com\/toolbuddy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hawlatech.com\/toolbuddy\/wp-json\/wp\/v2\/comments?post=9278"}],"version-history":[{"count":0,"href":"https:\/\/hawlatech.com\/toolbuddy\/wp-json\/wp\/v2\/pages\/9278\/revisions"}],"wp:attachment":[{"href":"https:\/\/hawlatech.com\/toolbuddy\/wp-json\/wp\/v2\/media?parent=9278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}