Convertisseur SVG en PNG<\/title>\r\n\r\n<style>\r\n \/* --- \u041e\u0431\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 (\u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b, \u043a\u043b\u0430\u0441\u0441\u044b \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u044b \u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u043c svg-) --- *\/\r\n body {\r\n margin: 0;\r\n padding: 20px;\r\n background-color: #f4f7f6;\r\n }\r\n .svg-converter-wrapper { \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n max-width: 550px;\r\n margin: 0px auto 30px auto;\r\n font-family: sans-serif;\r\n font-size: 16px;\r\n }\r\n\r\n \/* --- \u0417\u043e\u043d\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 --- *\/\r\n .svg-upload-area { \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n background-color: #ffffff;\r\n border-radius: 20px;\r\n padding: 80px 60px 60px 60px;\r\n text-align: center;\r\n border: 2px dashed #d0d4dc;\r\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);\r\n transition: border-color 0.3s ease, background-color 0.3s ease;\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 200px;\r\n }\r\n .svg-upload-area.drag-over { border-color: #007bff; background-color: #f8f9fa; }\r\n .svg-upload-area.upload-error { border-color: #dc3545 !important; }\r\n .svg-upload-area input[type=\"file\"] { display: none; }\r\n .svg-upload-button { \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n display: inline-block;\r\n background-color: #007bff;\r\n color: #ffffff;\r\n padding: 12px 30px;\r\n border-radius: 50px;\r\n font-size: 1em;\r\n font-weight: bold;\r\n cursor: pointer;\r\n transition: background-color 0.3s ease, transform 0.2s ease;\r\n margin-bottom: 15px;\r\n border: none; outline: none;\r\n }\r\n .svg-upload-button:hover { background-color: #0056b3; }\r\n .svg-upload-button:active { transform: scale(0.98); }\r\n .svg-upload-hint { color: #6c757d; margin: 0; } \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n .svg-upload-hint span { display: block; margin-bottom: 5px; line-height: 1.4; }\r\n .svg-upload-hint .main-hint { font-size: 1.0em; }\r\n .svg-upload-hint .sub-hint { font-size: 0.85em; }\r\n\r\n \/* --- \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a --- *\/\r\n .svg-converter-settings { margin-top: 15px; text-align: center; } \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n .svg-settings-toggle { \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n cursor: pointer; color: #007bff; text-decoration: none; border: 1px solid #007bff;\r\n padding: 8px 15px; border-radius: 20px; display: inline-block; margin-bottom: 15px;\r\n font-size: 0.9em; transition: background-color 0.3s, color 0.3s;\r\n }\r\n .svg-settings-toggle:hover { background-color: #007bff; color: #fff; }\r\n .svg-settings-content { \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n display: none;\r\n padding: 20px; border: 1px solid #e0e0e0; border-radius: 8px;\r\n background-color: #fdfdfd; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);\r\n text-align: left; font-size: 0.9em;\r\n }\r\n .svg-settings-content.is-visible { \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n display: block !important;\r\n }\r\n .setting-group { margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid #eee; }\r\n .setting-group:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }\r\n .setting-group h4 { margin-top: 0; margin-bottom: 12px; font-size: 1.1em; color: #333; }\r\n .svg-settings-content label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; } \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n .svg-settings-content .inline-label { display: inline-block; margin-right: 10px; margin-bottom: 0; vertical-align: middle; line-height: 30px; } \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n small { color: #6c757d; display: block; margin-top: 8px; line-height: 1.4; }\r\n .hidden { display: none !important; }\r\n\r\n \/* === \u0421\u0422\u0418\u041b\u0418 \u0414\u041b\u042f SELECT \u0418 INPUT NUMBER (\u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u043c svg-) === *\/\r\n .svg-converter-wrapper .svg-settings-content input[type=\"number\"] { background-color: #f0f0f0; color: #333; border: 1px solid #ccc; border-radius: 4px; padding: 8px 12px; margin-bottom: 10px; box-sizing: border-box; vertical-align: middle; font-size: inherit; line-height: 1.4; transition: border-color 0.2s ease, box-shadow 0.2s ease; width: 80px; margin-right: 10px; display: inline-block; }\r\n .svg-converter-wrapper .svg-settings-content input[type=\"number\"]::placeholder { color: #6c757d; opacity: 1; }\r\n .svg-converter-wrapper .svg-settings-content input[type=\"number\"]::-webkit-input-placeholder { color: #6c757d; opacity: 1; }\r\n .svg-converter-wrapper .svg-settings-content input[type=\"number\"]::-moz-placeholder { color: #6c757d; opacity: 1; }\r\n .svg-converter-wrapper .svg-settings-content input[type=\"number\"]:-ms-input-placeholder { color: #6c757d; opacity: 1; }\r\n .svg-converter-wrapper .svg-settings-content input[type=\"number\"]::-ms-input-placeholder { color: #6c757d; opacity: 1; }\r\n .svg-converter-wrapper .svg-settings-content select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: #f0f0f0 !important; color: #333 !important; border: 1px solid #ccc; border-radius: 4px; padding: 8px 35px 8px 12px; margin-bottom: 10px; box-sizing: border-box; vertical-align: middle; font-size: inherit; line-height: 1.4; transition: border-color 0.2s ease, box-shadow 0.2s ease; width: auto; min-width: 110px; display: inline-block; cursor: pointer; background-image: url('data:image\/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 10px; }\r\n .svg-converter-wrapper .svg-settings-content select::-ms-expand { display: none; }\r\n .svg-converter-wrapper .svg-settings-content select option { background-color: #f0f0f0; color: #333; padding: 5px 10px; }\r\n .svg-converter-wrapper .svg-settings-content select:focus,\r\n .svg-converter-wrapper .svg-settings-content input[type=\"number\"]:focus { outline: none; border-color: #86b7fe; box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); }\r\n \/* === \u041a\u041e\u041d\u0415\u0426 \u0421\u0422\u0418\u041b\u0415\u0419 \u0414\u041b\u042f SELECT \u0418 INPUT NUMBER === *\/\r\n\r\n \/* \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u043f\u0443\u0442\u044b *\/\r\n .svg-settings-content input[type=\"color\"], .svg-settings-content input[type=\"range\"] { margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; width: 100%; box-sizing: border-box; }\r\n .svg-settings-content input[type=\"range\"] { height: 8px; padding: 0; cursor: pointer; }\r\n .svg-settings-content input[type=\"color\"] { height: 30px; padding: 2px; cursor: pointer; }\r\n .svg-settings-content input[type=\"checkbox\"] { margin-right: 5px; vertical-align: middle; width: 16px; height: 16px; }\r\n .aspect-ratio-label, .bg-color-label { font-weight: normal; display: inline-block; margin-left: 0; vertical-align: middle; cursor: pointer; }\r\n .quality-setting { display: flex; align-items: center; gap: 10px; margin-top: 10px; }\r\n .quality-setting label { margin-bottom: 0; }\r\n .quality-setting input[type=\"range\"] { flex-grow: 1; margin-bottom: 0; }\r\n .quality-setting span { min-width: 30px; text-align: right; font-weight: bold; }\r\n .transform-buttons { display: flex; gap: 10px; flex-wrap: wrap; }\r\n .transform-buttons button { padding: 8px 12px; font-size: 0.9em; cursor: pointer; border: 1px solid #ccc; background-color: #fff; color: #333; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }\r\n .transform-buttons button:hover { border-color: #999; background-color: #f0f0f0; color: #333; }\r\n .transform-buttons button:active { background-color: #e0e0e0; }\r\n .transform-buttons button:disabled { color: #999; cursor: not-allowed; background-color: #f8f8f8; border-color: #ddd; }\r\n\r\n \/* --- \u041e\u0431\u043b\u0430\u0441\u0442\u044c \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u0438 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f --- *\/\r\n .svg-converter-status-area { margin-top: 25px; padding: 15px 20px; border: 1px solid #e0e0e0; border-radius: 8px; background-color: #f9f9f9; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); }\r\n .svg-converter-status { font-style: normal; color: #333; margin-bottom: 15px; font-size: 0.9em; line-height: 1.5; word-wrap: break-word; }\r\n .svg-converter-status.success { color: #155724; font-weight: bold; }\r\n .svg-converter-status.error { color: #721c24; font-weight: bold; }\r\n .svg-converter-download-area a { display: inline-block; padding: 10px 25px; background-color: #28a745; color: #fff; text-decoration: none; border-radius: 50px; font-weight: bold; font-size: 0.95em; transition: background-color 0.3s ease, transform 0.2s ease; border: none; cursor: pointer; }\r\n .svg-converter-download-area a:hover { background-color: #218838; }\r\n .svg-converter-download-area a:active { transform: scale(0.98); }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"svg-converter-wrapper\"> \r\n\r\n \r\n <div class=\"svg-upload-area\" id=\"svgUploadArea\"> \r\n \r\n <input type=\"file\" id=\"svgFileInput\" accept=\".svg, image\/svg+xml\" \/>\r\n \r\n <label for=\"svgFileInput\" class=\"svg-upload-button\" role=\"button\" tabindex=\"0\">\r\n T\u00e9l\u00e9charger une image SVG\r\n <\/label>\r\n <div class=\"svg-upload-hint\"> \r\n <span class=\"main-hint\">ou d\u00e9posez un fichier ici<\/span>\r\n <span class=\"sub-hint\">(Convertit les fichiers SVG en PNG par d\u00e9faut)<\/span> \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"svg-converter-settings\"> \r\n <span class=\"svg-settings-toggle\" id=\"toggleSettingsBtn\" role=\"button\" tabindex=\"0\"> \r\n Param\u00e8tres avanc\u00e9s \u25bc\r\n <\/span>\r\n <div class=\"svg-settings-content\" id=\"settingsContent\"> \r\n \r\n <div class=\"setting-group\">\r\n <h4>Format et qualit\u00e9 de sortie<\/h4>\r\n <label for=\"outputFormat\" class=\"inline-label\">Format:<\/label>\r\n <select id=\"outputFormat\">\r\n <option value=\"image\/png\" selected>PNG<\/option>\r\n <option value=\"image\/jpeg\">JPEG<\/option>\r\n <option value=\"image\/webp\">WebP<\/option>\r\n <\/select>\r\n <div class=\"quality-setting hidden\" id=\"qualityControl\">\r\n <label for=\"outputQuality\" class=\"inline-label\">Qualit\u00e9:<\/label>\r\n <input type=\"range\" id=\"outputQuality\" min=\"0.1\" max=\"1.0\" step=\"0.05\" value=\"0.9\">\r\n <span id=\"qualityValue\">0.90<\/span>\r\n <\/div>\r\n <small>Remarque\u00a0: le format PNG est sans perte, le curseur de qualit\u00e9 affecte uniquement JPEG\/WebP.<\/small>\r\n \r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Redimensionner<\/h4>\r\n <div>\r\n <label for=\"outputWidth\" class=\"inline-label\">Largeur:<\/label>\r\n <input type=\"number\" id=\"outputWidth\" placeholder=\"auto\" min=\"1\">\r\n <label for=\"outputHeight\" class=\"inline-label\">Hauteur:<\/label>\r\n <input type=\"number\" id=\"outputHeight\" placeholder=\"auto\" min=\"1\">\r\n <\/div>\r\n <div style=\"margin-top: 10px;\">\r\n <input type=\"checkbox\" id=\"maintainAspectRatio\" checked>\r\n <label for=\"maintainAspectRatio\" class=\"aspect-ratio-label\">Maintenir le rapport hauteur\/largeur<\/label>\r\n <\/div>\r\n <small>Remarque\u00a0: si aucune taille n'est sp\u00e9cifi\u00e9e, la taille intrins\u00e8que ou par d\u00e9faut du SVG sera utilis\u00e9e.<\/small> \r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Arri\u00e8re-plan<\/h4>\r\n <div>\r\n <input type=\"checkbox\" id=\"useBackgroundColor\">\r\n <label for=\"useBackgroundColor\" class=\"bg-color-label\">Ajouter une couleur d'arri\u00e8re-plan\u00a0:<\/label>\r\n <input type=\"color\" id=\"backgroundColor\" value=\"#FFFFFF\" style=\"vertical-align: middle; margin-left: 5px;\" disabled>\r\n <\/div>\r\n <small>(Utile pour ajouter un arri\u00e8re-plan aux SVG transparents ou lors de la sortie au format JPEG)<\/small> \r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Transformer<\/h4>\r\n <div class=\"transform-buttons\">\r\n <button type=\"button\" id=\"rotateBtn\" title=\"Rotation de 90\u00b0 dans le sens des aiguilles d'une montre\">Rotation de 90\u00b0 dans le sens des aiguilles d'une montre<\/button>\r\n <button type=\"button\" id=\"flipHorizontalBtn\" title=\"Retourner horizontalement\">Retourner horizontalement<\/button>\r\n <button type=\"button\" id=\"flipVerticalBtn\" title=\"Retourner verticalement\">Retourner verticalement<\/button>\r\n <button type=\"button\" id=\"resetTransformBtn\" title=\"R\u00e9initialiser les transformations\">R\u00e9initialiser les transformations<\/button>\r\n <\/div>\r\n <small>(La rotation peut affecter les dimensions si le rapport hauteur\/largeur n'est pas maintenu)<\/small>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n\r\n\r\n \r\n <div class=\"svg-converter-status-area\" id=\"statusArea\" style=\"display: none;\"> \r\n <div class=\"svg-converter-status\" id=\"converterStatus\"><\/div> \r\n <div class=\"svg-converter-download-area\" id=\"downloadLinkContainer\"><\/div> \r\n <\/div>\r\n\r\n<\/div> \r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n\r\n \/\/ --- \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b DOM ---\r\n const uploadArea = document.getElementById('svgUploadArea'); \/\/ \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u043e\r\n const fileInput = document.getElementById('svgFileInput'); \/\/ \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u043e\r\n const statusArea = document.getElementById('statusArea');\r\n const statusMessage = document.getElementById('converterStatus');\r\n const downloadLinkContainer = document.getElementById('downloadLinkContainer');\r\n const toggleSettingsBtn = document.getElementById('toggleSettingsBtn');\r\n const settingsContent = document.getElementById('settingsContent');\r\n const outputFormatSelect = document.getElementById('outputFormat');\r\n const qualityControlDiv = document.getElementById('qualityControl');\r\n const outputQualitySlider = document.getElementById('outputQuality');\r\n const qualityValueSpan = document.getElementById('qualityValue');\r\n const outputWidthInput = document.getElementById('outputWidth');\r\n const outputHeightInput = document.getElementById('outputHeight');\r\n const maintainAspectRatioCheckbox = document.getElementById('maintainAspectRatio');\r\n const useBackgroundColorCheckbox = document.getElementById('useBackgroundColor');\r\n const backgroundColorPicker = document.getElementById('backgroundColor');\r\n const rotateBtn = document.getElementById('rotateBtn');\r\n const flipHorizontalBtn = document.getElementById('flipHorizontalBtn');\r\n const flipVerticalBtn = document.getElementById('flipVerticalBtn');\r\n const resetTransformBtn = document.getElementById('resetTransformBtn');\r\n\r\n \/\/ --- \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 ---\r\n const elements = { uploadArea, fileInput, statusArea, statusMessage, downloadLinkContainer, toggleSettingsBtn, settingsContent, outputFormatSelect, qualityControlDiv, outputQualitySlider, qualityValueSpan, outputWidthInput, outputHeightInput, maintainAspectRatioCheckbox, useBackgroundColorCheckbox, backgroundColorPicker, rotateBtn, flipHorizontalBtn, flipVerticalBtn, resetTransformBtn };\r\n for (const key in elements) { \/* ... \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 ... *\/ }\r\n\r\n \/\/ --- \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439 ---\r\n let currentRotation = 0;\r\n let isFlippedHorizontal = false;\r\n let isFlippedVertical = false;\r\n let originalImageDimensions = { width: 0, height: 0 };\r\n\r\n \/\/ --- \u0424\u0443\u043d\u043a\u0446\u0438\u0438 ---\r\n function resetInterface() {\r\n statusMessage.textContent = '';\r\n statusMessage.className = 'svg-converter-status'; \/\/ \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043a\u043b\u0430\u0441\u0441\r\n downloadLinkContainer.innerHTML = '';\r\n statusArea.style.display = 'none';\r\n fileInput.value = '';\r\n uploadArea.classList.remove('upload-error');\r\n resetTransformations();\r\n updateTransformButtonStates();\r\n }\r\n\r\n function showStatus(message, type = 'info') {\r\n const prefix = type === 'error' ? '\u274c ' : (type === 'success' ? '\u2705 ' : '\u23f3 ');\r\n statusMessage.textContent = prefix + message;\r\n statusMessage.className = 'svg-converter-status'; \/\/ \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043a\u043b\u0430\u0441\u0441\r\n uploadArea.classList.remove('upload-error');\r\n if (type === 'success') { statusMessage.classList.add('success'); }\r\n else if (type === 'error') { statusMessage.classList.add('error'); uploadArea.classList.add('upload-error'); }\r\n if (type !== 'success') { if (type === 'error') downloadLinkContainer.innerHTML = ''; }\r\n statusArea.style.display = 'block';\r\n }\r\n\r\n function toggleSettings() { \/\/ \u0412\u0435\u0440\u0441\u0438\u044f \u0441 classList\r\n const isCurrentlyVisible = settingsContent.classList.contains('is-visible');\r\n if (isCurrentlyVisible) {\r\n settingsContent.classList.remove('is-visible');\r\n toggleSettingsBtn.textContent = 'Advanced Settings \u25bc';\r\n toggleSettingsBtn.setAttribute('aria-expanded', 'false');\r\n settingsContent.setAttribute('aria-hidden', 'true');\r\n } else {\r\n settingsContent.classList.add('is-visible');\r\n toggleSettingsBtn.textContent = 'Advanced Settings \u25b2';\r\n toggleSettingsBtn.setAttribute('aria-expanded', 'true');\r\n settingsContent.setAttribute('aria-hidden', 'false');\r\n }\r\n }\r\n function updateQualityControlVisibility() { \/* ... \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 ... *\/ }\r\n function updateQualityValueDisplay() { \/* ... \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 ... *\/ }\r\n function toggleBackgroundColorPicker() { \/* ... \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 ... *\/ }\r\n function resetTransformations() { \/* ... \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 ... *\/ }\r\n function updateTransformButtonStates() { \/* ... \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 ... *\/ }\r\n\r\n \/\/ --- \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0444\u0430\u0439\u043b\u0430 ---\r\n function handleFile(file) {\r\n resetInterface();\r\n if (!file) return;\r\n\r\n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0444\u0430\u0439\u043b\u0430 (\u0442\u043e\u043b\u044c\u043a\u043e SVG)\r\n const fileName = file.name;\r\n const fileMimeType = file.type || '';\r\n \/\/ SVG \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043f\u0443\u0441\u0442\u043e\u0439 MIME \u0442\u0438\u043f \u0438\u043b\u0438 image\/svg+xml\r\n const isSvg = \/\\.svg$\/i.test(fileName) || fileMimeType === 'image\/svg+xml';\r\n\r\n if (!isSvg) {\r\n showStatus(`Incorrect file format. Please upload an SVG file (received: ${fileName}, type: ${fileMimeType || 'unknown'}).`, 'error');\r\n return;\r\n }\r\n\r\n showStatus(`Processing \"${fileName}\"... Reading file.`, 'info');\r\n const reader = new FileReader();\r\n reader.onload = function(e) {\r\n showStatus(`Processing \"${fileName}\"... Rendering SVG.`, 'info');\r\n const img = new Image();\r\n\r\n \/\/ --- \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 SVG ---\r\n \/\/ \u0414\u043b\u044f SVG \u043b\u0443\u0447\u0448\u0435 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0435\u0433\u043e \u0432 Image, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c naturalWidth\/Height.\r\n \/\/ \u042d\u0442\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u0434\u0430\u043d\u044b \u0432 \u0441\u0430\u043c\u043e\u043c SVG \u0438\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 (300x150).\r\n img.onload = function() {\r\n originalImageDimensions.width = img.naturalWidth;\r\n originalImageDimensions.height = img.naturalHeight;\r\n\r\n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043d\u0430 \u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b (SVG \u0431\u0435\u0437 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u0432\u0435\u0440\u043d\u0443\u0442\u044c 0)\r\n \/\/ \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435, \u0435\u0441\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b, \u0447\u0442\u043e\u0431\u044b Canvas \u043d\u0435 \u0431\u044b\u043b 0x0\r\n if (!originalImageDimensions.width || !originalImageDimensions.height) {\r\n console.warn(`SVG \"${fileName}\" has no intrinsic dimensions. Using default 300x150 for initial calculation.`);\r\n originalImageDimensions.width = originalImageDimensions.width || 300;\r\n originalImageDimensions.height = originalImageDimensions.height || 150;\r\n }\r\n\r\n showStatus(`Processing \"${fileName}\"... Applying settings.`, 'info');\r\n\r\n \/\/ --- \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 (\u0440\u0430\u0441\u0447\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430, canvas, \u044d\u043a\u0441\u043f\u043e\u0440\u0442) ---\r\n \/\/ --- \u0410\u0411\u0421\u041e\u041b\u042e\u0422\u041d\u041e \u0418\u0414\u0415\u041d\u0422\u0418\u0427\u041d\u0410 \u0442\u043e\u0439, \u0447\u0442\u043e \u0431\u044b\u043b\u0430 \u0432 JPG\/WebP \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u0435 ---\r\n const mimeType = outputFormatSelect.value; const quality = parseFloat(outputQualitySlider.value);\r\n const maintainRatio = maintainAspectRatioCheckbox.checked; const useBG = useBackgroundColorCheckbox.checked; const bgColor = backgroundColorPicker.value;\r\n let desiredWidth = parseInt(outputWidthInput.value, 10) || 0; let desiredHeight = parseInt(outputHeightInput.value, 10) || 0;\r\n let targetWidth = originalImageDimensions.width; let targetHeight = originalImageDimensions.height;\r\n\r\n \/\/ \u041f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u043a\u0430\u0437\u0430\u043b \u0441\u0432\u043e\u0438 (\u0412\u0410\u0416\u041d\u041e: \u043e\u0442\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u043e\u0442 natural \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432)\r\n if (desiredWidth > 0 || desiredHeight > 0) {\r\n if (maintainRatio) {\r\n const originalRatio = originalImageDimensions.width \/ originalImageDimensions.height;\r\n if (originalRatio === 0 || !isFinite(originalRatio)) { \/*...*\/ return; }\r\n if (desiredWidth > 0 && desiredHeight <= 0) { targetWidth = desiredWidth; targetHeight = Math.round(desiredWidth \/ originalRatio); }\r\n else if (desiredHeight > 0 && desiredWidth <= 0) { targetHeight = desiredHeight; targetWidth = Math.round(desiredHeight * originalRatio); }\r\n else if (desiredWidth > 0 && desiredHeight > 0) { const widthRatio = desiredWidth \/ originalImageDimensions.width; const heightRatio = desiredHeight \/ originalImageDimensions.height; const scale = Math.min(widthRatio, heightRatio); targetWidth = Math.round(originalImageDimensions.width * scale); targetHeight = Math.round(originalImageDimensions.height * scale); }\r\n } else {\r\n if (desiredWidth > 0) targetWidth = desiredWidth;\r\n if (desiredHeight > 0) targetHeight = desiredHeight;\r\n }\r\n }\r\n targetWidth = Math.max(1, targetWidth); targetHeight = Math.max(1, targetHeight);\r\n\r\n const canvas = document.createElement('canvas'); const requiresSwap = currentRotation === 90 || currentRotation === 270;\r\n canvas.width = requiresSwap ? targetHeight : targetWidth; canvas.height = requiresSwap ? targetWidth : targetHeight;\r\n const MAX_CANVAS_AREA = 16384 * 16384; const MAX_CANVAS_DIM = 32767;\r\n if (canvas.width <= 0 || canvas.height <= 0 || canvas.width > MAX_CANVAS_DIM || canvas.height > MAX_CANVAS_DIM || (canvas.width * canvas.height > MAX_CANVAS_AREA)) { \/*...*\/ return; }\r\n const ctx = canvas.getContext('2d'); if (!ctx) { \/*...*\/ return; }\r\n\r\n try {\r\n ctx.save();\r\n if (useBG || mimeType === 'image\/jpeg') { ctx.fillStyle = bgColor; ctx.fillRect(0, 0, canvas.width, canvas.height); }\r\n else { ctx.clearRect(0, 0, canvas.width, canvas.height); }\r\n const centerX = canvas.width \/ 2; const centerY = canvas.height \/ 2; ctx.translate(centerX, centerY);\r\n if (currentRotation !== 0) ctx.rotate(currentRotation * Math.PI \/ 180);\r\n ctx.scale(isFlippedHorizontal ? -1 : 1, isFlippedVertical ? -1 : 1);\r\n const drawX = -targetWidth \/ 2; const drawY = -targetHeight \/ 2;\r\n \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0439 SVG (\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0435\u043f\u0435\u0440\u044c \u043a\u0430\u043a Image) \u043d\u0430 Canvas \u0441 \u043d\u0443\u0436\u043d\u044b\u043c\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438\r\n ctx.drawImage(img, drawX, drawY, targetWidth, targetHeight);\r\n ctx.restore();\r\n showStatus(`Processing \"${fileName}\"... Encoding final image.`, 'info');\r\n let exportQuality = quality; if (mimeType === 'image\/webp' && quality === 1.0) { console.log(\"Attempting near-lossless WebP (quality 1.0)\"); }\r\n const dataUrl = canvas.toDataURL(mimeType, (mimeType === 'image\/jpeg' || mimeType === 'image\/webp') ? exportQuality : undefined);\r\n if (!dataUrl || dataUrl === 'data:,') { throw new Error(\"Failed to encode image.\"); }\r\n const link = document.createElement('a'); link.href = dataUrl;\r\n const originalName = fileName.replace(\/\\.svg$\/i, ''); \/\/ \u0423\u0431\u0438\u0440\u0430\u0435\u043c .svg\r\n let extension = mimeType.split('\/')[1]; if (extension === 'jpeg') extension = 'jpg';\r\n link.download = `${originalName}_converted.${extension}`; \/\/ \u0418\u043c\u044f \u0444\u0430\u0439\u043b\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043e\r\n link.textContent = `Download ${link.download}`; downloadLinkContainer.innerHTML = ''; downloadLinkContainer.appendChild(link);\r\n link.click(); \/\/ \u0410\u0432\u0442\u043e-\u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435\r\n showStatus(`Success! Download started for \"${link.download}\".`, 'success');\r\n } catch (error) { \/* \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043e\u043a *\/ }\r\n };\r\n\r\n img.onerror = function(err) {\r\n console.error(\"SVG loading error:\", err);\r\n showStatus(`Error loading SVG image \"${fileName}\". It might be malformed or contain unsupported features.`, 'error');\r\n };\r\n\r\n \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c Data URL \u043a\u0430\u043a \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0434\u043b\u044f Image\r\n img.src = e.target.result;\r\n };\r\n reader.onerror = function(err) { \/*...*\/ showStatus(`Error reading file \"${fileName}\".`, 'error'); };\r\n \/\/ \u0427\u0438\u0442\u0430\u0435\u043c \u043a\u0430\u043a Data URL, \u0442.\u043a. \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 img.src \u0434\u043b\u044f SVG\r\n reader.readAsDataURL(file);\r\n }\r\n\r\n \/\/ --- \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 ---\r\n settingsContent.setAttribute('aria-hidden', 'true');\r\n toggleSettingsBtn.setAttribute('aria-expanded', 'false');\r\n toggleSettingsBtn.setAttribute('aria-controls', 'settingsContent');\r\n toggleSettingsBtn.addEventListener('click', toggleSettings);\r\n toggleSettingsBtn.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleSettings(); } });\r\n outputFormatSelect.addEventListener('change', updateQualityControlVisibility);\r\n outputQualitySlider.addEventListener('input', updateQualityValueDisplay);\r\n outputWidthInput.addEventListener('input', () => { if (maintainAspectRatioCheckbox.checked && outputWidthInput.value) outputHeightInput.value = ''; });\r\n outputHeightInput.addEventListener('input', () => { if (maintainAspectRatioCheckbox.checked && outputHeightInput.value) outputWidthInput.value = ''; });\r\n maintainAspectRatioCheckbox.nextElementSibling.addEventListener('click', () => maintainAspectRatioCheckbox.click());\r\n useBackgroundColorCheckbox.nextElementSibling.addEventListener('click', () => useBackgroundColorCheckbox.click());\r\n useBackgroundColorCheckbox.addEventListener('change', toggleBackgroundColorPicker);\r\n function applyTransformation(transformFunc) { \/*...*\/ } \/\/ \u041b\u043e\u0433\u0438\u043a\u0430 \u0442\u0430 \u0436\u0435\r\n rotateBtn.addEventListener('click', () => applyTransformation(() => { currentRotation = (currentRotation + 90) % 360; }));\r\n flipHorizontalBtn.addEventListener('click', () => applyTransformation(() => { isFlippedHorizontal = !isFlippedHorizontal; }));\r\n flipVerticalBtn.addEventListener('click', () => applyTransformation(() => { isFlippedVertical = !isFlippedVertical; }));\r\n resetTransformBtn.addEventListener('click', () => applyTransformation(() => { resetTransformations(); }));\r\n\r\n \/\/ \u0412\u044b\u0431\u043e\u0440 \u0444\u0430\u0439\u043b\u0430 (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c ID svgFileInput)\r\n fileInput.addEventListener('change', (event) => {\r\n if (event.target.files.length > 0) { handleFile(event.target.files[0]); }\r\n else { resetInterface(); }\r\n });\r\n\r\n \/\/ Drag and Drop (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c ID svgUploadArea)\r\n uploadArea.addEventListener('dragover', (event) => { \/*...*\/ });\r\n uploadArea.addEventListener('dragleave', (event) => { \/*...*\/ });\r\n uploadArea.addEventListener('drop', (event) => {\r\n event.preventDefault(); uploadArea.classList.remove('drag-over');\r\n if (event.dataTransfer.files.length > 0) {\r\n const droppedFile = event.dataTransfer.files[0];\r\n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u043f\u0440\u0438 Drop (\u0442\u043e\u043b\u044c\u043a\u043e SVG)\r\n const fileNameDrop = droppedFile.name; const fileMimeTypeDrop = droppedFile.type || '';\r\n const isSvgDrop = \/\\.svg$\/i.test(fileNameDrop) || fileMimeTypeDrop === 'image\/svg+xml';\r\n if (isSvgDrop) {\r\n fileInput.files = event.dataTransfer.files; handleFile(droppedFile);\r\n } else {\r\n showStatus(`Incorrect file format dropped. Please drop an SVG file (received: ${fileNameDrop}, type: ${fileMimeTypeDrop || 'unknown'}).`, 'error');\r\n fileInput.value = '';\r\n }\r\n } else { resetInterface(); }\r\n });\r\n\r\n \/\/ --- \u041f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 ---\r\n updateQualityControlVisibility();\r\n toggleBackgroundColorPicker();\r\n updateTransformButtonStates();\r\n\r\n}); \/\/ \u041a\u043e\u043d\u0435\u0446 'DOMContentLoaded'\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\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<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-575d0c1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"575d0c1\" data-element_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-inner-column elementor-element elementor-element-f3365e0\" data-id=\"f3365e0\" data-element_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-c4ab0e7 elementor-widget elementor-widget-text-editor\" data-id=\"c4ab0e7\" data-element_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>Autres formats : <a href=\"https:\/\/pngate.com\/fr\/avif-to-png\/\">Avif vers PNG<\/a>, <a href=\"https:\/\/pngate.com\/fr\/webp-vers-png\/\">Webp vers PNG<\/a>, <a href=\"https:\/\/pngate.com\/fr\/gif-to-png\/\">Gif en PNG<\/a>, <a href=\"https:\/\/pngate.com\/fr\/jpeg-to-png\/\">JPEG en PNG<\/a>, <a href=\"https:\/\/pngate.com\/fr\/heic-to-png\/\">HEIC vers PNG<\/a><\/p>\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<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-78fa69d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"78fa69d\" data-element_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-inner-column elementor-element elementor-element-83e295d\" data-id=\"83e295d\" data-element_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-7befef0 elementor-widget elementor-widget-text-editor\" data-id=\"7befef0\" data-element_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<h5>Vous avez trouv\u00e9 cela utile\u00a0? Partagez-le\u00a0!<\/h5>\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-3e8b238 elementor-share-buttons--shape-rounded elementor-share-buttons--align-center elementor-share-buttons--view-icon-text elementor-share-buttons--skin-gradient elementor-grid-0 elementor-share-buttons--color-official elementor-widget elementor-widget-share-buttons\" data-id=\"3e8b238\" data-element_type=\"widget\" data-widget_type=\"share-buttons.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-grid\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_pinterest\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on pinterest\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-pinterest\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\tPinterest\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_telegram\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on telegram\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-telegram\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\tT\u00e9l\u00e9gramme\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_facebook\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on facebook\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-facebook\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\tFacebook\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_twitter\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on twitter\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-twitter\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\tGazouillement\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_reddit\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on reddit\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-reddit\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\tReddit\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\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\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\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-53d46b4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"53d46b4\" data-element_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-33 elementor-top-column elementor-element elementor-element-5df0925\" data-id=\"5df0925\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-e819237\" data-id=\"e819237\" data-element_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-2d2fa93 elementor-widget elementor-widget-text-editor\" data-id=\"2d2fa93\" data-element_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>Besoin de convertir rapidement des fichiers SVG en PNG\u00a0? Notre convertisseur SVG en PNG gratuit en ligne transforme vos fichiers vectoriels en images PNG de haute qualit\u00e9, instantan\u00e9ment et sans aucune installation.<\/p><h2>Qu'est-ce qu'un fichier SVG ?<\/h2><p>SVG (Scalable Vector Graphics) est un format d'image vectorielle bas\u00e9 sur XML. Il est id\u00e9al pour les logos, les ic\u00f4nes et les illustrations, car il s'adapte \u00e0 l'infini sans perte de qualit\u00e9. Cependant, toutes les plateformes et tous les outils ne prennent pas en charge le format SVG.<\/p><p>C'est pourquoi la conversion de SVG en PNG (un format raster) est souvent n\u00e9cessaire pour faciliter la visualisation, l'\u00e9dition et le partage entre les appareils et les applications.<\/p><h2>Pourquoi convertir SVG en PNG\u00a0?<\/h2><p>Voici quelques raisons cl\u00e9s pour lesquelles vous devriez utiliser un convertisseur SVG en PNG\u00a0:<\/p><ul><li><strong>Meilleure compatibilit\u00e9 :<\/strong> Les PNG fonctionnent dans tous les navigateurs, \u00e9diteurs et syst\u00e8mes d\u2019exploitation.<\/li><li><strong>Partage facile :<\/strong> T\u00e9l\u00e9chargez des PNG sur les r\u00e9seaux sociaux, les applications de messagerie ou les sites Web sans probl\u00e8me.<\/li><li><strong>Conversion raster :<\/strong> Certains outils ou plateformes ne prennent pas en charge les images vectorielles comme SVG.<\/li><li><strong>Support de transparence :<\/strong> Le format PNG prend en charge la transparence alpha, ce qui est id\u00e9al pour les ressources de conception.<\/li><\/ul><h2>Comment convertir un fichier SVG en PNG en ligne<\/h2><p>Avec notre convertisseur d'images SVG en ligne, le processus est rapide et sans effort :<\/p><ol><li><strong>T\u00e9l\u00e9chargez votre fichier SVG<\/strong> \u2013 Faites glisser et d\u00e9posez ou s\u00e9lectionnez le fichier depuis votre appareil.<\/li><li><strong>La conversion commence instantan\u00e9ment<\/strong> \u2013 Aucun clic n\u00e9cessaire. Notre convertisseur s'ex\u00e9cute directement dans votre navigateur.<\/li><li><strong>T\u00e9l\u00e9chargez votre PNG<\/strong> \u2013 Obtenez une image raster de haute qualit\u00e9 en un seul clic.<\/li><\/ol><p>Aucun logiciel \u00e0 installer, aucun compte requis. Convertissez des images sans perte de qualit\u00e9, quel que soit votre appareil.<\/p><h2>Avantages de notre convertisseur SVG en PNG<\/h2><ul><li><strong>Utilisation gratuite<\/strong> \u2013 Pas d\u2019inscription, pas de limites.<\/li><li><strong>Conversion instantan\u00e9e<\/strong> \u2013 Pas de retard ni d\u2019\u00e9cran d\u2019attente.<\/li><li><strong>S\u00e9curis\u00e9 et priv\u00e9<\/strong> \u2013 Les fichiers ne sont jamais t\u00e9l\u00e9charg\u00e9s sur un serveur.<\/li><li><strong>Pr\u00e9serve la transparence<\/strong> \u2013 Conserver les canaux alpha dans le PNG de sortie.<\/li><li><strong>Des r\u00e9sultats parfaits au pixel pr\u00e8s<\/strong> \u2013 Restitue des fichiers PNG nets et pr\u00e9cis \u00e0 partir de n\u2019importe quelle conception SVG.<\/li><li><strong>Prise en charge multiplateforme<\/strong> \u2013 Fonctionne sur Windows, macOS, Android, iOS, Linux.<\/li><\/ul><h2>SVG vs PNG\u00a0: comparaison des formats<\/h2><table border=\"1\" cellspacing=\"0\" cellpadding=\"8\"><thead><tr><th>Fonctionnalit\u00e9<\/th><th>SVG<\/th><th>PNG<\/th><\/tr><\/thead><tbody><tr><td>Type d'image<\/td><td>Vecteur<\/td><td>Trame<\/td><\/tr><tr><td>\u00c9volutivit\u00e9<\/td><td>Infini, aucune perte de qualit\u00e9<\/td><td>R\u00e9solution fixe<\/td><\/tr><tr><td>Transparence<\/td><td>Soutenu<\/td><td>Soutenu<\/td><\/tr><tr><td>Compatibilit\u00e9<\/td><td>Limit\u00e9 dans certaines applications<\/td><td>Universel<\/td><\/tr><tr><td>Cas d'utilisation<\/td><td>Logos, ic\u00f4nes, conception d'interface utilisateur<\/td><td>Web, impression, partage, \u00e9dition<\/td><\/tr><\/tbody><\/table><h2>Questions fr\u00e9quemment pos\u00e9es<\/h2><h5>Ce convertisseur SVG en PNG est-il vraiment gratuit ?<\/h5><p>Oui, 100% est gratuit sans limite d'utilisation, sans publicit\u00e9 et sans inscription requise.<\/p><h5>Cet outil prend-il en charge les fichiers SVG volumineux\u00a0?<\/h5><p>Oui, il g\u00e8re sans probl\u00e8me les fichiers SVG complexes ou haute r\u00e9solution. La conversion est locale et rapide.<\/p><h5>Mon PNG conservera-t-il la transparence ?<\/h5><p>Absolument. L'outil pr\u00e9serve la transparence alpha lors de la conversion SVG en PNG.<\/p>\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-33 elementor-top-column elementor-element elementor-element-33f395e\" data-id=\"33f395e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\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>","protected":false},"excerpt":{"rendered":"<p>Convertisseur SVG en PNG\u00a0: convertissez gratuitement des fichiers SVG en PNG en ligne. T\u00e9l\u00e9chargez simplement vos images SVG ci-dessous et obtenez des fichiers PNG de haute qualit\u00e9 en quelques secondes.<span class=\"excerpt-hellip\"> [\u2026]<\/span><\/p>","protected":false},"author":1,"featured_media":4910,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-4909","page","type-page","status-publish","has-post-thumbnail","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/pages\/4909","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/comments?post=4909"}],"version-history":[{"count":16,"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/pages\/4909\/revisions"}],"predecessor-version":[{"id":4965,"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/pages\/4909\/revisions\/4965"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/media\/4910"}],"wp:attachment":[{"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/media?parent=4909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}