Menu
I've been doing a tutorial on Treehouse on responsive web design. At this point in the tutorial we are asked to convert an image to an svg so it can scale fully responsively.
Rather than use Adobe Illustrator, which I don't own, I used the freeware Inkscape. Once the image is converted we are asked to open the image in a text editor and remove the height and width requirements from the svg declaration and add the object selector to our max width rule to our style css:
img, object { max-width: 100%; } However, after removing height and width the image is not responsive but instead oddly clipped like so:
Does anyone know what error I have made? Or what I should have removed?
Sorry if the question has been asked before, I can't find it.
edit1, the code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) --> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="svg2985" version="1.1" inkscape:version="0.48.4 r9939" width="319" height="177" sodipodi:docname="logo.gif"> <metadata id="metadata2991"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <defs id="defs2989" /> <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="640" inkscape:window-height="480" id="namedview2987" showgrid="false" inkscape:zoom="0.94984326" inkscape:cx="159.5" inkscape:cy="88.5" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="0" inkscape:current-layer="svg2985" /> <image width="319" height="177" xlink:href=" It is the "height" and "width" in the first SVG tag that I have removed.
410
Scalable Vector Graphics (SVG) is a markup language based on XML that is used for displaying of 2-dimensional graphics. SVG has numerous advantages over the traditional image formats like PNG, JPG, GIF etc. SVG documents are scalable, interactive, accessible, responsive, programmable, and have great performance.
Yes, Inkscape is free software, and it is awesome for personal use, creating an SVG file format. But if you want to get into making more professional quality with easy-to-use software, the small price for AI is 100% worth it.
Inkscape is an open-source vector graphics editor similar to Adobe Illustrator, Corel Draw, Freehand, or Xara X. What sets Inkscape apart is its use of Scalable Vector Graphics (SVG), an open XML-based W3C standard, as the native format.
Inkscape now provides an option to enable viewbox if you save the file as "optimized svg". Very handy!
103
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
