คำถามติดแท็ก svg

ฉันกำลังมองหาที่จะใช้โลโก้ SVG สำหรับเว็บไซต์ - เพื่อทำให้มันดูดีในการออกแบบที่ตอบสนองต่อทุกอุปกรณ์ แต่เนื่องจากมีปัญหาฉันต้องการสนับสนุนอุปกรณ์และเบราว์เซอร์ให้ได้มากที่สุด ความเร็วในการโหลดก็เป็นสิ่งสำคัญเช่นกัน การตั้งค่าการส่งออกใน Adobe Illustrator มีความสอดคล้องกันอย่างไร ใน Illustrator มีหลายตัวเลือกสำหรับการส่งออก SVG อันดับแรกโปรไฟล์ SVG ใดดีที่สุด? ฉันคิดว่า SVG Tiny มีขนาดไฟล์ที่ต่ำกว่านี้หรือไม่ อุปกรณ์จำนวนมากรองรับ SVG Tiny หรือไม่ ความแตกต่างที่สำคัญที่สุดคืออะไร? (โดยไม่ต้องอ่านสัตว์ประหลาด W3นี้) ประการที่สองฉันถือว่าตัวเลือกที่ดีที่สุดสำหรับตำแหน่งภาพคือ "ลิงก์" (ดูคำอธิบายหลังเครื่องหมายอัศเจรีย์) เบราว์เซอร์รองรับตัวเลือก "ฝัง" อย่างไร ขอบคุณ! PS จะมีตัวเลือกสำรอง alpha-PNG แต่ฉันต้องการให้ SVG ได้รับการสนับสนุนอย่างดีที่สุด (ลองคิดดูว่าตัวเลือกสำรอง - เช่น JPG - น่าจะเป็นตัวเลือกที่ดีที่สุดในกรณีนี้เนื่องจาก alpha-PNG นั้นต้องการโซลูชันสำหรับ …

128 html  css  image  svg  adobe-illustrator 

เป็นไปได้ไหมที่จะฝังมาร์กอัป SVG ลงในคอมโพเนนต์ ReactJS render: function() { return ( <span> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmln ... </span> ); } ผลลัพธ์ในข้อผิดพลาด: ไม่รองรับแอตทริบิวต์ Namespace ReactJSX ไม่ใช่ XML วิธีที่เบาที่สุดในการทำคืออะไร การใช้บางอย่างเช่นReact ARTเป็นวิธีที่มากเกินไปสำหรับสิ่งที่ฉันพยายามทำ

127 javascript  svg  reactjs 

ขนาด Favicon รูปแบบไฟล์และแท็กเมตา / ลิงก์ใดที่ควรใช้ในปี 2020 ซึ่งรวมถึงไอคอนแอปเปิ้ล, หน้าต่าง, Android และอุปกรณ์อื่น ๆ ที่ผู้คนใช้ในปัจจุบัน ฉันใช้ Opera และฉันเห็นว่ามันรองรับรูปแบบ svg ปัจจุบันเป็นทางออกที่ดีที่สุดในการใช้ svg หรือไม่? มีตัวเลือก "ไฟล์เดียวเหมาะกับทุกคน" หรือไม่? ฉันเรียกดูเว็บไซต์หลายแห่งและตรวจสอบ "ตัวสร้างไอคอน Fav" ต่างๆ พวกเขาทั้งหมดมีอายุหลายปีและทำงานกับไฟล์ png เป็นส่วนใหญ่ ตัวอย่างเช่น: ควรใช้รหัสใดสำหรับ ico และ svg? <link rel="icon" href="favicon.ico" type="image/ico"> <link rel="icon" href="favicon.svg" type="image/svg+xml"> หรือควรระบุขนาดหาก ico มีขนาดมากกว่านี้ ฉันไม่พบคำตอบที่ดีสักคำตอบ <link rel="icon" sizes="16x16 24x24 …

116 html  svg  png  favicon 

ปิด. คำถามนี้ไม่เป็นไปตามหลักเกณฑ์กองมากเกิน ขณะนี้ยังไม่ยอมรับคำตอบ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นหัวข้อสำหรับ Stack Overflow ปิดให้บริการใน2 ปีที่ผ่านมา ปรับปรุงคำถามนี้ ฉันกำลังพยายามแปลง PDF เป็น SVG อย่างไรก็ตามสิ่งที่ฉันใช้อยู่ในขณะนี้จะจับคู่เส้นทางสำหรับตัวอักษรทุกตัวในทุกข้อความซึ่งหมายความว่าถ้าฉันเปลี่ยนข้อความในไฟล์ต้นฉบับมันจะดูน่าเกลียด ฉันสงสัยว่าตัวแปลง PDF เป็น SVG ที่สะอาดที่สุดคืออะไรหวังว่าจะไม่มีเส้นทางสำหรับพื้นที่ข้อความที่ไม่ต้องการ อย่างที่เราทราบ PDF และ SVG นั้นค่อนข้างคล้ายกันดังนั้นฉันคิดว่ามีตัวแปลงที่ดีอยู่บ้าง

115 pdf  svg 

ฉันมีไฟล์ SVG ที่ระบุwidthและheightเป็นviewboxแบบนี้: <svg width="576pt" height="432pt" viewBox="0 0 576 432" > ... แต่จะแสดงผลในเบราว์เซอร์ในขนาดที่ฉันตัดสินใจได้อย่างไร ฉันต้องการให้มันเล็กลงและได้ลอง: <object width="400" data="image.svg"></object> แต่แล้วฉันก็เห็นแถบเลื่อนที่มองเห็นได้ ใช้งานได้ถ้าฉันเปลี่ยนไฟล์ SVG เพื่อตั้งค่าwidthและheightเป็น100%แทน แต่ฉันต้องการกำหนดขนาดใน HTML โดยไม่คำนึงถึงขนาดที่ใช้ในไฟล์ SVG เป็นไปได้หรือไม่

115 html  svg 

โดยปกติแล้วในการรวมไอคอน SVG ส่วนใหญ่ของฉันที่ต้องใช้สไตล์เรียบง่ายฉันทำ <svg> <use xlink:href="/svg/svg-sprite#my-icon" /> </svg> ตอนนี้ฉันได้เล่นกับ ReactJS แล้วเมื่อประเมินว่ามันเป็นองค์ประกอบที่เป็นไปได้ในกองพัฒนาส่วนหน้าใหม่ของฉัน แต่ฉันสังเกตเห็นว่าในรายการแท็ก / แอตทริบิวต์ที่รองรับไม่รองรับuseหรือไม่xlink:hrefได้รับการสนับสนุน เป็นไปได้ไหมที่จะใช้สไปรต์ svg และโหลดด้วยวิธีนี้ใน ReactJS

114 svg  sprite  reactjs 

ฉันกำลังพยายามเลือกเทคโนโลยีที่เหมาะสมเพื่อใช้ในการอัปเดตโปรเจ็กต์ที่โดยทั่วไปแล้วจะแสดงจุดหลายพันจุดในกราฟที่สามารถซูมได้และสามารถเลื่อนได้ การใช้งานปัจจุบันโดยใช้ Protovis มีประสิทธิภาพต่ำ ตรวจสอบได้ที่นี่: http://www.planethunters.org/classify มีจุดประมาณ 2,000 จุดเมื่อซูมออกจนสุด ลองใช้ที่จับที่ด้านล่างเพื่อซูมเข้าเล็กน้อยแล้วลากเพื่อเลื่อนไปรอบ ๆ คุณจะเห็นว่ามันค่อนข้างขาด ๆ หาย ๆ และการใช้งาน CPU ของคุณอาจสูงถึง 100% ในหนึ่งคอร์เว้นแต่คุณจะมีคอมพิวเตอร์ที่เร็วมาก การเปลี่ยนพื้นที่โฟกัสแต่ละครั้งจะเรียกการวาดใหม่เป็นโปรโตวิสซึ่งค่อนข้างช้าและแย่กว่าเมื่อมีการดึงจุดมากขึ้น ฉันต้องการอัปเดตอินเทอร์เฟซบางอย่างรวมทั้งเปลี่ยนเทคโนโลยีการแสดงภาพที่เป็นพื้นฐานให้ตอบสนองกับภาพเคลื่อนไหวและการโต้ตอบมากขึ้น จากบทความต่อไปนี้ดูเหมือนว่าตัวเลือกจะอยู่ระหว่างไลบรารีที่ใช้ SVG อื่นหรือแบบผ้าใบ http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/ d3.jsซึ่งงอกออกมาจาก Protovis เป็น SVG-based และควรจะเป็นดีกว่าที่การแสดงผลภาพเคลื่อนไหว อย่างไรก็ตามฉันสงสัยว่าจะดีขึ้นมากแค่ไหนและเพดานประสิทธิภาพของมันเป็นอย่างไร สำหรับเหตุผลที่ฉันยังพิจารณายกเครื่องสมบูรณ์มากขึ้นโดยใช้ห้องสมุดผ้าใบ-based เช่นKineticJS อย่างไรก็ตามก่อนที่ฉันจะใช้วิธีใดวิธีหนึ่งมากเกินไปฉันอยากได้ยินจากคนที่ทำเว็บแอปพลิเคชันที่คล้ายกันซึ่งมีข้อมูลจำนวนมากนี้และขอความเห็นจากพวกเขา สิ่งที่สำคัญที่สุดคือประสิทธิภาพโดยเน้นที่ความสะดวกในการเพิ่มคุณสมบัติการโต้ตอบอื่น ๆ และการเขียนโปรแกรมภาพเคลื่อนไหว อาจจะมีไม่เกิน 2,000 จุดในครั้งเดียวโดยมีแถบข้อผิดพลาดเล็ก ๆ ในแต่ละอัน การซูมเข้าออกและการเลื่อนไปมาจะต้องมีความราบรื่น หากไลบรารี SVG ล่าสุดเหมาะสมกับสิ่งนี้บางทีความสะดวกในการใช้ d3 จะมีมากกว่าการตั้งค่าที่เพิ่มขึ้นสำหรับ KineticJS …

114 html  canvas  svg  d3.js  kineticjs 

ขณะประมวลผล XML ของฉันฉันกำลังพยายามคัดลอกไฟล์ SVG ที่อ้างอิงจากhrefแอตทริบิวต์ลงใน HTML เอาต์พุตโดยตรงด้วยบรรทัดต่อไปนี้: <xsl:copy-of copy-namespaces="yes" select="document(@href)"/> copy-namespacesไม่ควรจะเป็นสิ่งที่จำเป็นตั้งแต่ค่าเริ่มต้นคือ "ใช่" แล้ว แต่ฉันได้เพิ่มเพื่อป้องกันไม่ให้คำถามเกี่ยวกับหรือไม่ฉันได้พยายามมัน ไฟล์จะถูกคัดลอกไปยัง HTML แต่องค์ประกอบเนมสเปซจะถูกซ่อนไว้ ตัวอย่างเช่นไฟล์ที่มีลักษณะเช่นนี้ก่อนที่จะคัดลอก: <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/> </cc:Work> </rdf:RDF> </metadata> <g transform="translate(-519.21143,-667.79077)" id="layer1"> <image xlink:href="data:image/png;base64 หลังจากนั้นจะมีลักษณะดังนี้: <_0:RDF xmlns:_0="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <_0:Work xmlns:_0="http://creativecommons.org/ns#" about=""> <_0:format xmlns:_0="http://purl.org/dc/elements/1.1/">image/svg+xml</_0:format> <_0:type xmlns:_0="http://purl.org/dc/elements/1.1/" resource="http://purl.org/dc/dcmitype/StillImage"/> <_0:title xmlns:_0="http://purl.org/dc/elements/1.1/"/> </_0:Work> </_0:RDF> </metadata> <g …

113 html  xml  svg  xslt-1.0  xslt-2.0 

เป้าหมายคือให้<svg>องค์ประกอบขยายถึงขนาดของคอนเทนเนอร์ระดับบนสุดในกรณีนี้<div>คือไม่ว่าคอนเทนเนอร์นั้นจะใหญ่หรือเล็กเพียงใด รหัส: <style> svg, #container{ height: 100%; width: 100%; } </style> <div id="container"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" > <rect x="0" y="0" width="100" height="100" /> </svg> </div> วิธีแก้ปัญหาที่พบบ่อยที่สุดสำหรับปัญหานี้คือการตั้งค่าviewBoxแอตทริบิวต์ใน<svg>องค์ประกอบ viewBox="0 0 widthOfContainer heightOfContainer" อย่างไรก็ตามสิ่งนี้ดูเหมือนจะใช้ไม่ได้ในกรณีที่องค์ประกอบภายใน<svg>องค์ประกอบมีความกว้างและ / หรือความสูงที่กำหนดไว้ล่วงหน้า ตัวอย่างเช่น<rect>องค์ประกอบในโค้ดด้านบนมีการกำหนดความกว้างและความสูงไว้อย่างชัดเจน ดังนั้นวิธีแก้ปัญหาที่ชัดเจนคือการใช้% widths และ% height กับองค์ประกอบเหล่านั้นด้วย แต่สิ่งนี้ต้องทำหรือไม่? โดยเฉพาะอย่างยิ่งเนื่องจาก<img src=test.svg >ทำงานได้ดีและขยาย / สัญญาโดยไม่มีปัญหาใด ๆ กับ<rect>ความสูงและความกว้างที่ตั้งไว้อย่างชัดเจน หากองค์ประกอบเช่น<rect>และองค์ประกอบอื่น ๆ เช่นนั้นจะต้องมีความกว้างและความสูงกำหนดไว้เป็นเปอร์เซ็นต์มีวิธีใดบ้างใน …

112 css  html  svg  responsive-design 

ฉันกำลังทำโปรเจ็กต์เว็บที่เกี่ยวข้องกับแผนที่ที่สร้างขึ้นแบบไดนามิกของสหรัฐอเมริกาโดยระบายสีสถานะต่างๆตามชุดข้อมูล ไฟล์ SVG นี้ให้แผนที่ว่างเปล่าของสหรัฐอเมริกาและเปลี่ยนสีของแต่ละรัฐได้ง่ายมาก ปัญหาคือเบราว์เซอร์ IE ไม่รองรับ SVG ดังนั้นเพื่อให้ฉันใช้ไวยากรณ์ที่มีประโยชน์ที่ svg เสนอฉันจะต้องแปลงเป็น JPG ตามหลักการแล้วฉันต้องการทำสิ่งนี้กับไลบรารี GD2 เท่านั้น แต่สามารถใช้ ImageMagick ได้ด้วย ฉันไม่รู้ว่าต้องทำอย่างไร วิธีการแก้ปัญหาใด ๆ ที่ทำให้ฉันสามารถเปลี่ยนสีของรัฐบนแผนที่ของสหรัฐอเมริกาได้แบบไดนามิกจะได้รับการพิจารณา ที่สำคัญคือมันง่ายที่จะเปลี่ยนสีได้ทันทีและเป็นเบราว์เซอร์ข้าม โปรดใช้โซลูชัน PHP / Apache เท่านั้น

111 php  svg  imagemagick  jpeg  gd2 

ฉันต้องการแสดง<text>สิ่งที่จะตัดบรรทัดอัตโนมัติไปยังคอนเทนเนอร์ใน SVG <rect>เช่นเดียวกับข้อความ HTML ที่เติม<div>องค์ประกอบ มีวิธีทำไหม ฉันไม่ต้องการวางตำแหน่งเส้นแบบกระจัดกระจายโดยใช้<tspan>s

111 xml  text  svg  word-wrap 

ฉันต้องการแสดงไฟล์ svg (ฉันมีภาพ svg มากมาย) แต่สิ่งที่ฉันหาวิธีแสดงไม่เจอ ฉันพยายามใช้ส่วนประกอบImage and Useของreact-native-svgแต่ไม่ได้ผล และฉันพยายามทำด้วยวิธีดั้งเดิม แต่มันยากมากที่จะแสดงแค่ภาพ svg รหัสตัวอย่าง: import Svg, { Use, Image, } from 'react-native-svg'; <View> <Svg width="80" height="80"> <Image href={require('./svg/1f604.svg')} /> </SvgRn> </View> นอกจากนี้ฉันรู้ว่า react native ไม่รองรับ svg โดยทั่วไป แต่ฉันคิดว่ามีคนแก้ไขปัญหานี้ด้วยวิธีที่ยุ่งยาก (มี / ไม่มี react-native-svg)

111 javascript  svg  react-native 

ฉันเพิ่งพบปัญหาแปลก ๆ ที่ปรากฏใน Safari 10 เท่านั้นฉันมีการ์ดเล่นภาพ svg ซึ่งบางครั้งก็หมุนโดยใช้transform:rotate(xdeg). การ์ดที่ฉันใช้มีรูปแบบบล็อกสีแดง เมื่อมันไม่หมุนหรือหมุนเป็นมุมฉากเช่น 90, 180, 270 ก็จะดูปกติ แต่มุมอื่น ๆ ที่ไม่ใช่พื้นหลังจะเปลี่ยนเป็นสีน้ำเงิน! ฉันเพิ่งได้รับรายงานเกี่ยวกับเรื่องนี้จากผู้ใช้คนหนึ่งของฉันและไม่เคยเห็นอะไรแปลก ๆ เบราว์เซอร์อื่น ๆ ทั้งหมดทำงานได้ตามปกติ Safari 9 ทำงานได้ตามปกติ ฉันเดาว่านี่เป็นเพียงข้อผิดพลาดแปลก ๆ ใน Safari 10 แต่มีความคิดเกี่ยวกับวิธีการแก้ไขหรือไม่ ฉันได้สร้าง repro ขั้นต่ำที่: https://jsfiddle.net/2zv4garu/1/

109 html  css  svg  safari 

นี่คือสิ่งที่ฉันมี: <path class="..." onmousemove="show_tooltip(event,'very long text \\\n I would like to linebreak')" onmouseout="hide_tooltip()" d="..."/> <rect class="tooltip_bg" id="tooltip_bg" ... /> <text class="tooltip" id="tooltip" ...>Tooltip</text> <script> <![CDATA[ function show_tooltip(e,text) { var tt = document.getElementById('tooltip'); var bg = document.getElementById('tooltip_bg'); // set position ... tt.textContent=text; bg.setAttribute('width',tt.getBBox().width+10); bg.setAttribute('height',tt.getBBox().height+6); // set visibility ... } ... ตอนนี้ข้อความ …

107 javascript  svg  newline  line-breaks 

ฉันกำลังทำงานกับ ECMAScript / JavaScript สำหรับไฟล์ SVG และจำเป็นต้องได้รับwidthและheightของtextองค์ประกอบเพื่อที่ฉันจะสามารถปรับขนาดสี่เหลี่ยมผืนผ้าที่ล้อมรอบได้ ใน HTML ฉันจะสามารถใช้แอตทริบิวต์offsetWidthand offsetHeightกับองค์ประกอบได้ แต่ดูเหมือนว่าคุณสมบัติเหล่านั้นไม่สามารถใช้งานได้ นี่คือส่วนที่ฉันต้องทำงานด้วย ฉันต้องการเปลี่ยนความกว้างของสี่เหลี่ยมทุกครั้งที่ฉันเปลี่ยนข้อความ แต่ฉันไม่รู้วิธีรับจริงwidth(เป็นพิกเซล) ของtextองค์ประกอบ <rect x="100" y="100" width="100" height="100" /> <text>Some Text</text> ความคิดใด ๆ ?

107 javascript  dom  text  svg