Svg image element not displaying in Safari -

-

safari browser (i'm testing under windows) seems having problem in displaying svg image element.

<!doctype html> <html> <body>  <h1>my first svg</h1>  <img src="image.svg" />  </body> </html>

and here content of image.svg:

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!-- created inkscape (http://www.inkscape.org/) --> <svg      xmlns="http://www.w3.org/2000/svg"      xmlns:xlink="http://www.w3.org/1999/xlink">       <rect x="50" y="50" width="100" height="100" style="fill:blue"></rect>       <rect id="foo" x="50" y="150" width="500" height="500" style="fill:green"></rect>      <image x="50" y="10" width="200" height="200" xlink:href="data:image/png;base64,ivborw0kggoaaaansuheugaaaauaaaafcayaaacnbyblaaaaheleqvqi12p4//8/w38giaxdibke0dhxgljnbaao9txl0y4ohwaaaabjru5erkjggg=="></image> </svg>

is there solution or workaround make work in safari?

i think there 2 problems here:

  1. you haven't said how large svg image is. rule, should @ least include viewbox attribute in <svg> tag. example:

    <svg width="250" height="250" viewbox="0 0 250 250" ... >

  2. the other problem safari isn't particularly brilliant @ rendering svgs. however, tends better when embed them <iframe> or <object> tag instead of using <img>. example:

    <object data="image.svg" type="image/svg+xml"></object>

    also, make sure server delivering svg content correct mime type (content-type: image/svg+xml), can cause problems too.

so give try:

html source:

<!doctype html> <html> <body> <h1>my first svg</h1> <object data="image.svg" type="image/svg+xml"></object> </body> </html>

image.svg:

<?xml version="1.0" encoding="utf-8" standalone="no"?> <svg width="250" height="250" viewbox="0 0 250 250"      xmlns="http://www.w3.org/2000/svg"      xmlns:xlink="http://www.w3.org/1999/xlink">       <rect x="50" y="50" width="100" height="100" style="fill:blue"></rect>       <rect id="foo" x="50" y="150" width="500" height="500" style="fill:green"></rect>      <image x="50" y="10" width="200" height="200" xlink:href="data:image/png;base64,ivborw0kggoaaaansuheugaaaauaaaafcayaaacnbyblaaaaheleqvqi12p4//8/w38giaxdibke0dhxgljnbaao9txl0y4ohwaaaabjru5erkjggg=="></image> </svg>

Comments

Post a Comment

Popular posts from this blog

ruby on rails - RuntimeError: Circular dependency detected while autoloading constant - ActiveAdmin.register Role -

-
i using activeadmin , have file doing this: activeadmin.register role something--- end however, server gives me error: runtimeerror: circular dependency detected while autoloading constant role /library/ruby/gems/2.0.0/gems/activesupport-4.0.10/lib/active_support/dependencies.rb:461:in `load_missing_constant' /library/ruby/gems/2.0.0/gems/activesupport-4.0.10/lib/active_support/dependencies.rb:184:in `const_missing' ~/desktop/boxfox/app/admin/role.rb:1:in `<top (required)>' /library/ruby/gems/2.0.0/gems/activesupport-4.0.10/lib/active_support/dependencies.rb:424:in `load' /library/ruby/gems/2.0.0/gems/activesupport-4.0.10/lib/active_support/dependencies.rb:424:in `block in load_file' /library/ruby/gems/2.0.0/gems/activesupport-4.0.10/lib/active_support/dependencies.rb:616:in `new_constants_in' /library/ruby/gems/2.0.0/gems/activesupport-4.0.10/lib/active_support/dependencies.rb:423:in `load_file' /library/ruby/gems/2.0.0/gems/activesuppor
Read more

c++ - OpenMP unpredictable overhead -

-
i have simple openmp code runs 4 empty threads , reports time: #include "omp.h" #include <sys/time.h> #include <cstdio> double start_time; void process_thread() { } int main(){ struct timeval tv; gettimeofday(&tv, null); start_time = 1000*((double)tv.tv_sec + 1e-6*(double)tv.tv_usec); printf("beginning time: %.3fms ",start_time-start_time); #pragma omp parallel schedule(static,1) for(int i=0;i<4;i++) process_thread(); gettimeofday(&tv, null); double cur_time = 1000*((double)tv.tv_sec + 1e-6*(double)tv.tv_usec); printf("finishing time: %.3fms\n\n",cur_time-start_time); } without openmp running time small , consistent: beginning time: 0.000ms finishing time: 0.050ms beginning time: 0.000ms finishing time: 0.050ms beginning time: 0.000ms finishing time: 0.049ms beginning time: 0.000ms finishing time: 0.049ms beginning time: 0.000ms finishing time: 0.050ms beginnin
Read more

javascript - Wordpress slider, not displayed 100% width -

-
so im making first wordpress theme scratch going fine got problem. want slider on homepage 1 thing wrong. im setting width of image 100% !important doesnt go 100% width. makes image wider not 100%. example here: http://bit.ly/11ouebg see image doesnt contain whole width. can see background-color. really weird, im using meteor slides. i hope can me out :d
Read more