All geek questions in one place

Problem with dynamic SVG imaging

I am trying to write a server side script (PHP) to generate an SVG image based on user input. I am using the following code:

<?php

echo '<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<head><meta http-equiv="Content-Type" content="svg+xml" /></head>

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

</svg>';

?>

I read somewhere that the MIME type should be svg + xml, so I tried to set it as content, as you can see above. The correct code was received by Firefox, but the image is not displayed. Does anyone know what to change here?

+3
source share
3 answers

According to the SVG page on wikipedia , an SVG should be presented as image/svg+xml.
See also: 1.2 SVG MIME Type, File Name Extension, and Macintosh File Type

Next meta:

<meta http-equiv="Content-Type" content="svg/xml" />

- HTML-, ...
, , - SVG - , ^^


HTTP- , .

PHP header; :

header('Content-type: image/svg+xml');

echo '<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>';

:

  • <meta> <head>; , <head>, , ....
  • header
  • SVG firefox - , , ; -)

, !

+20

, :

<?xml version='1.0'?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <head><title>test</title></head>
    <body>
    <svg:svg id="display" width="500" heigth="500" viewBox="0 0 500 500">
        <svg:rect width="50" height="50" x="100" y="100" fill="red" stroke="black" />
    </svg:svg>
    </body>
</html>

, :

<?xml version='1.0'?>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head><title>test</title></head>
    <body>
    <svg id="display" width="500" heigth="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect width="50" height="50" x="100" y="100" fill="red" stroke="black" />
    </svg>
    </body>
</html>

, /. svg-, xmlns html, .

+1

I recently managed to use svg in an xhtml document.

<?xml version='1.0'?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <head><title>test</title></head>
    <body>
    <svg:svg id="display" width="500" heigth="500" viewBox="0 0 500 500">
        <svg:rect width="50" height="50" x="100" y="100" fill="red" stroke="black" />
    </svg:svg>
    </body>
</html>

The trick was to use the svg: prefix for each item. He should know that the namespace must be properly parsed by the browser.

Then I exposed the Javascript Raphael library http://raphaeljs.com/ , which simplifies the handling of svg objects.

I hope this helps

0
source

Source: https://habr.com/ru/post/1721052/

More articles:


All Articles