Make WordPress Core

Opened 10 years ago

Closed 10 years ago

Last modified 7 weeks ago

#26435 closed enhancement (duplicate)

add svg file for upload

Reported by: camaran's profile camaran Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.8
Component: Media Keywords:
Focuses: Cc:


add support for svg file in media

Change History (2)

#1 @nacin
10 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

SVG is XML which is insecure. #24251

#2 @eloreskjane
7 weeks ago

Update the Frontend:
You need to ensure that your frontend allows users to select and upload SVG files. You can use an HTML <input type="file"> element to create a file input field.

<input type="file" id="svgFileInput" accept=".svg">

The accept attribute with the value .svg restricts the file selection to SVG files only.

Update the Backend:
You'll need to update your backend code to handle the SVG file uploads. The process may vary depending on the programming language and framework you are using. Here's a simplified example using Node.js and Express:

const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();

app.use(fileUpload());'/upload', (req, res) => {
  if (!req.files || !req.files.svgFile) {
    return res.status(400).send('No SVG file uploaded.');

  const svgFile = req.files.svgFile;
  // Here, you can save or process the SVG file as needed.

  res.status(200).send('SVG file uploaded successfully.');

app.listen(3000, () => {
  console.log('Server is running on port 3000');

This code uses the express-fileupload middleware to handle file uploads. Make sure to install it using npm install express-fileupload.

Security Considerations:
SVG files can potentially contain malicious code, so it's crucial to validate and sanitize them before processing or displaying them. You should consider using a library like sanitize-svg to sanitize the SVG content to prevent security risks.

Displaying SVG Files:
To display SVG files on your website, you can use the <img> tag, the <object> tag, or inline SVG using the <svg> tag. For example:

<!-- Using the <img> tag -->
<img src="path/to/your/uploaded.svg" alt="Uploaded SVG">

<!-- Using the <object> tag -->
<object data="path/to/your/uploaded.svg" type="image/svg+xml"></object>

<!-- Using inline SVG -->
<svg xmlns="" width="100" height="100">
  <image href="path/to/your/uploaded.svg" width="100" height="100" />

Remember to set the appropriate path to the uploaded SVG file in the src or data attribute.

Test your file upload functionality thoroughly to ensure it works as expected and handles SVG files securely.

Additional Configuration:
Depending on your application requirements, you may want to add additional features such as file size limits, file type checking, or storage location configuration for uploaded SVG files.

Please note that this is a simplified example, and in a production environment, you should consider more robust error handling, security measures, and best practices to ensure the security and reliability of your file upload functionality.

Last edited 7 weeks ago by eloreskjane (previous) (diff)
Note: See TracTickets for help on using tickets.